The aim for this project is to showcase my ability to create a web application that helps online store owners manage their content. To build the frontend of the app, I used Next.js. I also leveraged TypeScript, a superset of JavaScript that adds static type checking, to ensure code quality and reliability. The interactive and dynamic components of the app were built using React. For efficient web design, I styled the app with Tailwind.I also used Shadcn-ui, a collection of beautifully designed components that I copied and pasted into my app. I used Shadcn-ui’s CLI to download the components and customize them to match my branding. To connect and interact with MySQL, I used Prisma, to simplify database management. Using Prisma, I modeled, migrated, and manipulated the data for the online store. Finally, I deployed the app on Vercel.
I faced several technical challenges, such as data modeling. To design a data model that would capture the essential information and relationships of the online store, such as products, categories, orders, customers, and the cart. I used Prisma's schema language to define the data model and generate the corresponding database tables and types. I made sure that the data model was consistent, normalized, and scalable.
I had to create a dashboard that would display the key metrics and insights of the online store, such as sales, revenue, orders, customers, and reviews. I used Recharts, a library that provides a set of React components for building charts, to create various types of charts, such as line, bar, pie, and radar. I had to ensure that the dashboard was responsive, interactive, and informative.
I used Clerk, a platform that provides various authentication methods, such as passwords, email codes, OAuth, and more. I also used Clerk’s prebuilt UI components, such as sign-in, sign-up, and user profile, that can be customized and themed to match my branding. I integrated Clerk with Next.js using Clerk’s SDK and React hooks.
I used Cloudinary, a platform that lets me store, transform, optimize, and deliver my media assets. I also used it's optimization and transformation features to enhance the user experience and performance of the app.
Here are some screenshots and snippet fo the app:
Untitled.video.-.Made.with.Clipchamp.mp4
Untitled.video.-.Made.with.Clipchamp.mp4
