ShopiFy is a modern, full-stack eCommerce web application built with a focus on clean, scalable code and an intuitive user experience. The app allows users to browse products, add them to their cart, and securely authenticate with the platform. The backend is built using NestJS, Prisma, and PostgreSQL, while the frontend utilizes React, TypeScript, Redux, and TailwindCSS for a responsive and interactive user interface.
- React: A JavaScript library for building user interfaces.
- TypeScript: A typed superset of JavaScript for improved developer experience and type safety.
- Redux: A predictable state container for managing the global state, used for cart management in this project.
- TailwindCSS: A utility-first CSS framework for styling the app.
- NestJS: A progressive Node.js framework for building efficient, scalable server-side applications.
- Prisma: A modern ORM for working with databases in Node.js and TypeScript applications.
- PostgreSQL: A powerful, open-source relational database system.
- User Authentication: Secure login and registration with JWT-based authentication.
- Product Management: Display and manage products with various functionalities such as product details, images, and availability.
- Cart Management: Manage cart state using Redux, including adding/removing products and checking out.
- Responsive Design: Fully responsive UI optimized for both desktop and mobile users.
- Node.js (v14+)
- npm or yarn
- PostgreSQL (local or remote database)
-
Clone the repository:
git clone https://github.com/yourusername/ShopiFy.git cd ShopiFy -
Install backend dependencies:
cd backend npm install -
Set up your PostgreSQL database and configure
.env:- Create a PostgreSQL database.
- Add the following environment variables in the
.envfile:DATABASE_URL="postgresql://USER:PASSWORD@localhost:5432/yourdatabase" JWT_SECRET="your-secret-key"
-
Run database migrations:
npx prisma migrate dev
-
Start the backend server:
npm run start:dev
-
Navigate to the frontend directory:
cd frontend -
Install frontend dependencies:
npm install
-
Configure API base URL in the frontend:
- Create a
.envfile in thefrontendfolder and add:REACT_APP_API_URL=http://localhost:3001
- Create a
-
Start the frontend development server:
npm run dev
- Visit the frontend at
http://localhost:3000. - Use the authentication system to register and log in.
- Browse products, add them to your cart, and proceed with checkout.
- Fork the repository.
- Create a new branch for your feature or bugfix:
git checkout -b feature/your-feature
- Make your changes.
- Commit and push your changes.
- Open a pull request.
Thank you for checking out ShopiFy! 🎉