[Full Stack] Audiophile E-Commerce Website

A solution for the "Audiophile e-commerce website" Frontend Mentor challenge.
View the challenge solution page »

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Features
4. Roadmap
5. Contributing
6. License
7. Contact
8. Lessons Learned

About The Project

This full-stack web application is a challenge from Frontend Mentor, a site that provides professional designs that allows developers to practice building websites in a realistic workflow. In this project, I've implemented an immersive ecommerce platform tailored specifically for audiophiles.

(back to top)

Built With

• 
• 
• using NeonDB
• 
• 
• 
• react-hook-form & zod for form handling
• shadcn-ui for highly-customizable UI components

(back to top)

Getting Started

Prerequisites

• npm

  npm install npm@latest -g

Installation

1. Clone the repo

   git clone https://github.com/ronnieima/audiophile-ecommerce.git

2. Install NPM packages

   npm install

3. Enter your Neon database URL into .env.local

    NEXTAUTH_URL=http://localhost:3000
   
    # A random string that is used to hash tokens, sign/encrypt cookies and generate cryptographic keys.
    # You can quickly create a good value on the command line via this openssl command. `openssl rand -base64 32`
    NEXTAUTH_SECRET=123
   
    # Neon database URL
    DATABASE_URL=
   

4. Start the app

   npm run dev

(back to top)

Features

User Credential Authentication

Cart Functionality

Checkout Feature

(back to top)

Roadmap

• Persist orders
• Different auth providers (Google, GitHub, etc.)

See the open issues for a full list of proposed features (and known issues).

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Contact

Ronnie Kaito Imagawa - @imagawaDev - ronniekaito@imagawa.dev

Project Link: https://github.com/ronnieima/audiophile-ecommerce

(back to top)

Lessons Learned

The HTML Picture Element

<picture>
  <source />
  <source />
  <img />
</picture>

User Credential Authentication

Implementing user credential authentication provided valuable insights into security practices. Although the approach may not offer the highest level of security, it serves as an essential learning experience. Employing libraries like bcrypt for password hashing enhances data protection by securely storing user credentials in the database. It highlights the importance of safeguarding sensitive information and implementing encryption techniques to mitigate potential security threats.

Devising Database Schemas for the Cart

Designing effective database schemas for managing shopping carts involves careful consideration of various factors. It requires defining clear relationships between entities such as users, products, and orders. By structuring the database schema appropriately, it becomes easier to manage cart functionality, including adding, removing, and updating items. Additionally, optimizing queries and ensuring data consistency are crucial aspects of cart schema design to deliver seamless shopping experiences for users.

(back to top)