Computer Peripherals E-commerce

This project is an e-commerce platform specializing in selling computer peripherals. It was built to study and practice web development with cutting-edge technologies.

Demo

• FSW Store

Screenshot

Key Features

• Customized Login: Users can easily log in via google email, discord github or using user tester credentials to access recent orders and purchase history, providing a personalized experience.

• Responsiveness: The layout is adaptable to all devices, ensuring a seamless experience across different screen sizes.

• Product Grouping: Products are categorized and grouped according to their type and category, making it easier for users to navigate and find specific items.

• Integration with payment infrastructure: Complete simulation of product purchase in e-commerce.

• Data Management: Data management system for the e-commerce, allowing for efficient and intuitive management of products, categories and orders. (Desktop only for now)

Technologies Used

• Next.js: For optimized performance ensuring a fast and efficient user experience and my familiarity with the technology.

• Next Auth: For implement authentication easily.

• Supabase: As a database, due to its real-time capabilities, it allows for updates and data synchronization across multiple devices, ensuring a consistent experience for users.

• Prisma ORM: Because its a efficient query builder, have a GUI for viewing and editing data in the database, and easy-to-use migration system.

• Shadcn/ui: For building the user interface i used Shadcn/ui for its ability to create accessible, functional, and fully customizable components, speeding up UI development.

• Stripe: As a payment infrastructure, I integrated Stripe because of its excellent integration API, guaranteeing secure and reliable transactions for our customers.

How To

##### Clone this repo #####

# https
$ git clone https://github.com/christopher-alves-dev/cc-store.git

# ssh
$ git clone git@github.com:christopher-alves-dev/cc-store.git

##### Access this repo #####
$ cd cc-store

##### Install dependencies #####
$ npm install

##### Run the application #####
$ npm run dev

Tests

Shop

To see your orders you should be logged in, so you can signIn with Google, Discord, Github or a user tester account that i created.

##### User tester account #####

# email
user@test.com

# password
test-pass

Admin

Go to "/login" in your browser's address bar to enter the e-commerce dashboard. In this area you can manage your e-commerce products, categories and orders.

PS: The main dashboard page and responsiveness are under development.

##### User tester account #####

# email
user@test.com

# password
test-pass

Upcoming features

• [WIP] - Data Management Responsiveness and main page
• Customer Reviews and Ratings

---

Made with 💙 by Christopher Alves 👋 Get in touch!