LEGO Store E-commerce Project 🧩

Description

This is a personal project aimed at building a LEGO store e-commerce website to improve my skills in web development. The website will allow users to browse a collection of LEGO, add them to their cart, and complete their purchases securely online.

Technologies Used 🔪

Frontend

• TailwindCSS: A utility-first CSS framework for quickly styling web applications.
• Redux Toolkit: A set of tools and best practices for managing application state in Redux
• React Hook Form: A library for easy and efficient form management in React applications.
• Zod: A TypeScript-first schema declaration and validation library, used for validating and parsing user input.

Backend

• Next.JS: A React framework that enables server-side rendering, static site generation, and routing for building fast and SEO-friendly web applications.
• Next-Auth : An authentication library for Next.JS applications, providing features like session management, OAuth authentication, and custom authentication strategies.
• Axios: A promise-based HTTP client for making requests to the backend API.

Database

• PostgreSQL (with Vercel): Relational database management system used for storing user data, product information, and order details.
• Prisma: ORM (Object-Relational Mapping) tool to facilitate interaction with PostgreSQL database and generate SQL queries more efficiently.

Payment integration

• Stripe: Payment processing platform for handling online transactions securely.

Project Goals 🚀

• Create a responsive and visually appealing user interface.
• Implement features such as:
  • Product catalog ✅
  • Shopping cart ✅
  • Favorites products ✅
  • User authentication with credentials, Google, and GitHub accounts ✅
  • Admin dashboard (CRUD) ✅
  • Utilize PostgreSQL to store and manage user data and product information ✅
  • Order management ⏳
  • Integrate Stripe for handling online payments securely ⏳
• Gain practical experience with Next.js, state management, databases, and other modern web development technologies.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.