Web Development
Here you‘ll find a selection of my recent projects, showcasing my skills in TypeScript, React, Next, Sass and more. Specializing in front-end development, my goals is in creating responsive, user-friendly websites that ensure a great user experience. While front-end is my strength, I am eager about every aspect of web development and am constantly trying to improve and expand my skill set.
Fullstack Project: FilmFellow (2024)
Project Overview
FilmFellow is an application where users can find information about movies, give ratings and reviews, and get recommendations based on their activity. This project was developed as an agile project for Buutti Trainee Academy.
Our minimum viable product included three user types (visitor, user, admin), user login and registration, movie search and filters, movie recommendations, saving watched movies, creating watchlists, and reviewing movies. We met these goals and even had time to add extra features.
Contribution
My main responsibilities included visual design, responsiveness, usability, and working with Sass. I also worked a lot on the frontend components and learned testing with Vitest/Cypress and handling a PostgreSQL database with Prisma ORM.
Learning Next.js after using React took some time, but I grew to like it. I enjoyed designing and programming reusable components and CSS classes, which made building page layouts easier. This project got me interested in testing and made backend development less intimidating.
Frameworks and Libraries
Frontend: Next.js, TypeScript, React, Sass, React-toastify, React Hook Form, yup, Feather icons
Backend: NextAuth.js, argon2, PostgreSQL, Prisma
Testing and tools: Vitest, Cypress, ESLint, Prettier, Docker
Fullstack Project: Project Management App (2024)
Project Overview
Project Management App is a multiuser application featuring a rich text editor, Kanban board, and calendar. It was developed as an agile group project for Buutti Trainee Academy.
Our minimum viable product included user registration and login, managing projects and pages, and adding various components like text and task lists. Users can label and move items within and between task lists. Additionally, projects can be shared with different access roles, such as Manager, Editor, and Viewer.
Contribution
In this project, I focused on visual design, responsiveness, learning Tailwind and creating frontend components. I also contributed to manual testing and bug fixing to ensure a smooth and polished user experience.
This was my first project working as a programmer in a team of multiple developers. Besides developing my technical skills, I also learned about Scrum, Git, reviewing pull requests, and the importance of good communication and teamwork.
Frameworks and Libraries
Frontend: Vite, TypeScript, React, React-router, React-calendar, Tailwind, Yjs, Yup, React Hook Form, Redux Toolkit, Redux-persist, Tiptap, dnd-kit, date-fns, Feather icons
Backend: TypeScript, Node, tsx, Express, Express-session, Argon2, PostgreSQL, Prisma, Hocuspocus, Redis
Testing and Tools: Supertest, Vitest, ESLint, Docker
Front-end Project: NoteNook (2023)
Project Overview
NoteNook is a simple planner that helps you organize your notes, to-dos, and memos all in one place. You can search or filter your tasks with fun icons and view all current month‘s deadlines in a calendar.
When I started this project, I had very limited knowledge of different frameworks and libraries, so I worked with what I had. It was my first web development project for Trainee Academy, and I wanted to create something fun and colorful that I could use myself!
Technical Details
NoteNook was built using TypeScript with React, and it uses JSON server as a simple backend. The layout is styled with pure CSS. The login and registration features were added towards the end of the project and do not have session handling, so you need to log in again if you refresh the page.
I plan to redo this project now that I have a better skillset and more knowledge. I aim to use a real database and implement user sessions, making it possible for multiple users to utilize the planner better.
Frameworks and Libraries
Frontend: Vite, TypeScript, React, CSS
Backend: Axios, JSON server