This is a solution to the Calculator app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- See the size of the elements adjust based on their device's screen size
- Perform mathematical operations like addition, subtraction, multiplication, and division
- Adjust the color theme based on their preference
- Bonus: Have their initial theme preference checked using
prefers-color-schemeand have any additional changes saved in the browser
🚀
Getting Prisma up and running for the first time can be a bit challenging, just like with any database. However, what’s great about Prisma is how quickly I can set it up without needing to open another app, like with MongoDB. I highly recommend it!
One of the best things about Prisma is its seamless integration into my workflow. Unlike MongoDB, which often requires additional tools or interfaces, Prisma provides a unified solution that allows me to manage my database directly within my project. This makes development much more efficient and time-saving.
🎯
- Setting up Prisma with Next.js and PostgreSQL
- Using Prisma Migrate for database schema changes
- Efficient querying with Prisma Client
🔥
For my future projects, I plan to switch to PostgreSQL to take full advantage of its advanced types and scalability features. Additionally, I aim to improve my proficiency with my tech stack as a whole, since I'll be working on numerous personal and career-based projects.
💡
- Frontend: Next.js, React, TypeScript
- Styling & UI: Tailwind CSS with Shadcn, Daisy UI, Framer Motion, Magic UI
- Backend & Database: Prisma, PostgreSQL
- Testing & Validation: Vitest, Jest, Testing Library, Zod
Staying consistent and improving my skills with these technologies is my top priority! 🚀
📚
| Resource Name | Description | Link |
|---|---|---|
| Vitest Documentation | Official documentation for Vitest testing framework. | Vitest Docs |
| TypeScript Documentation | Comprehensive guide on TypeScript language features and best practices. | TypeScript Docs |
| Tailwind CSS v4 Documentation | Official documentation for Tailwind CSS version 4, including utilities and configurations. | Tailwind CSS v4 Docs |
| Framer Motion Documentation | Detailed documentation for the Framer Motion library for animations. | Framer Motion Docs |
| React Documentation | Official React documentation covering concepts, hooks, and advanced patterns. | React Docs |
| Next.js Documentation | Official Next.js documentation covering routing, API routes, and optimizations. | Next.js Docs |
| MongoDB Documentation | Official MongoDB documentation for database setup, queries, and best practices. | MongoDB Docs |
| Express.js Documentation | Guide on using Express.js to build backend APIs with Node.js. | Express.js Docs |
| Node.js Documentation | Official Node.js documentation for backend development. | Node.js Docs |
| Jest Documentation | Comprehensive guide on testing with Jest, useful for unit and integration testing. | Jest Docs |
| Testing Library Documentation | Guide on using React Testing Library for writing accessible tests. | Testing Library Docs |
| Zod Documentation | Schema validation library useful for Next.js and TypeScript projects. | Zod Docs |
🚀 Happy coding!