Frontend Mentor - Audiophile e-commerce website solution

This is a solution to the Audiophile e-commerce website challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • Features
  • Learnings
  • Continued development
  • Resources
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

• View the optimal layout for the app depending on their device's screen size
• See hover states for all interactive elements on the page
• Add/Remove products from the cart
• Edit product quantities in the cart
• CRUD operations for products and categories (Create, Read, Update, Delete)
• Delete individual orders and clear all orders
• See an order confirmation modal after checking out with an order summary
• Bonus: Keep track of what's in the cart, even after refreshing the browser (localStorage could be used for this if you're not building out a full-stack app)

Screenshot

Links

• Solution URL: https://github.com/TedJenkler/New-E-commerce-MERN-Tailwind-AdminDashboard
• Live Site URL: https://new-e-commerce-mern-tailwind.onrender.com/

My process

Built with

• Flexbox for layout design
• Mobile-first workflow
• React JavaScript library
• Tailwind CSS for styling with utility-first CSS
• Vite frontend build tool for fast development
• Redux Toolkit for efficient state management
• Express.js for backend API development
• MongoDB for database storage

Features

• Responsive design with Flexbox and mobile-first approach
• State management with Redux Toolkit
• Form handling and validation
• CRUD operations for products and categories
• Order management
• Stripe integration for test payments

Learnings

In this project, I focused on improving my skills in:

• Advanced React concepts like Redux Toolkit for state management
• Responsive design strategies with Flexbox
• Form handling and validation techniques
• Node.js and Express.js: I deepened my understanding and improved my skills in Node.js and Express.js, particularly focusing on best practices in structuring Express applications.

Continued development

Areas I plan to focus on for this project:

• Making the dashboard forms fully responsive to ensure usability on all devices.
• Implementing more customization options for the dashboard interface and components.
• Refactoring and optimizing code for improved performance and maintainability.
• Conducting thorough testing to identify and resolve any remaining issues or bugs.
• Enhancing user experience by refining form handling and validation within the dashboard.

Resources

Helpful resources I used during this project:

• Redux Toolkit Documentation
• Tailwind CSS Documentation - For styling with utility-first CSS
• React Router v6 Documentation - For navigation and routing in React applications
• Stack Overflow - For community support and troubleshooting
• Overflow - For design collaboration and feedback
• OpenAI's ChatGPT - For generating quick dashboard styling templates

Author

• Frontend Mentor - @TedJenkler
• Linkedin - Teodor Jenkler

Acknowledgments

I would like to thank OpenAI's ChatGPT for assisting in styling the dashboard, providing a fast template to kickstart development.