Cake E-commerce

Features • Technologies • Getting Started • Usage • Support • License

Cake E-commerce is a platform designed to manage a fictional online cake store, inspired by the world of confectionery. This project was born from a mix of curiosity and personal connection, making it both a learning experience and a tribute to the art of baking. 👨‍🍳🍰

✨ Features

• 🛍️ Product Management – Intuitive and easy-to-use pages for creation, update, and deletion of cakes, as well as management of cake types, categories, frostings, and fillings. All routes are properly protected so that only admins can access them.

• 🔍 Menu - A full menu page listing all cakes for sale, with pagination, search, and multiple sorting and filtering options.

• 🛒 Order Management – Management of delivery dates and order statuses with advanced filtering and sorting options. Admin users have full order visibility, while individual users can access their own. This system focuses on order management and does not include payment features.

• 👤 User Authentication – Registration, login, and protected route handling using JWT (JSON Web Tokens), with role-based access control to manage sessions and restrict access to specific routes.

• 🎨 Cake customization - A dedicated page where clients can customize each cake according to its own specific rules before the purchase.

• 📦 Cart System – Add, remove, and update items in the shopping cart.

🧪 Technologies

This project was developed with the following technologies:

• Next
• React
• TypeScript
• SASS

Project Dependencies:

• @hookform/resolvers
• @uidotdev/usehooks
• axios
• next
• nuqs
• react
• react-currency-mask
• react-datepicker
• react-dom
• react-dropzone
• react-hook-form
• react-icons
• react-toastify
• sharp
• use-mask-input
• zod

Dev Dependencies:

• @types/node
• @types/react
• @types/react-dom
• sass
• typescript

🚀 Getting started

Prerequisites

• NodeJS
• Git

API

Clone, install, and run the API by following the instructions in this repository: api-cake-ecommerce. Once the API is running locally, set the API_PROTOCOL, API_HOST, and API_PORT variables in your .env.local file. (see the section Config .env variables)

Cloning

To clone the project, follow the steps below:

# Clone the project
$ git clone https://github.com/JoaciFaustino/front-cake-ecommerce.git

# Access the project folder
$ cd front-cake-ecommerce

Config .env variables

Use the .env.local.example file as a reference to create your own .env.local configuration file in the root of the project.

• API_PROTOCOL: The protocol used by your API.
• API_HOST: The host of your API.
• API_PORT: The HTTP port of your API.

Starting

To run it, follow the steps below:

# Install dependencies
npm install

# Run the project
npm run dev

💡 Usage

• To access the admin dashboard pages:

  1. Go to the /login route and log in using the credentials below:
     

  2. After logging in, click the user profile icon in the header, then select "Admin Dashboard":
     

💖 Support

To morally and mentally support the project, make sure to leave a ⭐️!

📃 License

This project is under MIT license