The primary goal behind this full-stack project is to create a comprehensive and versatile platform that is both user-friendly and developer-friendly. By seamlessly integrating commonly-used third-party applications and tools, like stripe, react-hookform, reactquery, db with prisma etc.

Features

• 💁‍♂️ User authentication
• 🖥️ Product Catalog
• 🛒 Product Cart
• 💵 Secure Payment integration
• 📈 Amazing Admin dashboard
• 💽 Data fetch from backend server
• 📄 Clean Documentation with Sawgger

Technology used in Frontend

• ReactJS Model Front end JS Framework. we are using React 18
• React-query Sate management tools for handdling asynchronous data state (Server State) like products and collections.
• react-router-dom handle for page routering
• zustand Light weight and scalable state-management tools and we use it to handle the Client (UI) state like current user, selected theme etc
• zod Data validation tool and use it to validate the form data
• framer-motion Easy and light weight Animation Library
• Stripe Third party Payment API, provide secure payment handling.
• chakra-ui simple, modular compent I also created Autocomplete component for the Chakra UI in this project

Difficulty & Soultion

How to Query large amount of products data and variables.

I used React Query with infinite scroll feature, React Query will also handdle caching,so when even there are large amount of data we can still draft a query and fetch it with different params. At the past using ReduxRTK and Redux to fetch data in the infinite scroll we do need to do some effort to that, but thanks to react-query we do infinite scroll in clean, maintainable and easy way.

User Authentication

In production application I would definitely suggest to use some auth provider, like AWS Cognito, Firebase or others. It a hooliday project, I hased the user password and stored in DB, every time user login a JWT token will return to client.

Documentation

Good Application must include Good Documentation, the backend mainly handle REST API Request, so swagger will be a prefect choices in this cases.

Links

• Github