- 📒 Table of Contents
- 📍 Overview
- ⚙️ Features
- 📂 Project Structure
- 🚀 Getting Started
- 💡Usage
- 🪜 Steps from scratch
- 🧩 Modules
- 🗺 Roadmap
- 🤝 Contributing
- 👏 Acknowledgments
This project is a full-stack e-commerce application developed using TypeScript, React, Redux Toolkit, and Material UI for the frontend. The backend is powered by ASP .NET Core, Entity Framework Core, and PostgreSQL. The application provides a user-friendly shopping experience with features such as browsing products, adding items to the cart, placing orders, user authentication, budget app and more.
Deployed App: fs13-fullstack.fly.dev
- Browse products catalog with filters and pagintion
- View product detail page
- Add products to the shopping cart
- View and manage the shopping cart
- User authentication and registration
- Place orders through checkout and see order list
- Add, Delete or Edit products through inventory page [Admin only]
- Light and dark theme options
- [Bonus] Budget app to add,edit or remove deposite and expense items with pie charts. Also fields for target, saving and progression bar here
- [Bonus] Errors for testing purposes here
- [Bonus] Small app to modify data in state using redux toolkit here here
The project is structured into two main modules: frontend and backend.
The frontend directory contains the user interface developed using React and Redux Toolkit.
- Components: Various reusable UI components are organized in this folder for easy integration and maintenance.
- Features: Different features of the application, such as product listing, shopping cart, and user authentication, are organized as separate features for modularity.
- Styling: Material UI is used for styling, ensuring a modern and consistent design.
- Routing: React Router is employed for handling navigation between different pages.
File structure ↓
frontend/
├─node_modules/
├─public/
├─src/
│ ├─app/
│ │ ├─api/
│ │ │ └─agent.ts
│ │ ├─components/
│ │ │ ├─AppCheckbox.tsx
│ │ │ ├─AppDropzone.tsx
│ │ │ ├─AppPagination.tsx
│ │ │ ├─AppSelectList.tsx
│ │ │ ├─AppTextInput.tsx
│ │ │ ├─CheckboxButtons.tsx
│ │ │ ├─EditDialog.tsx
│ │ │ └─RadioButtonGroup.tsx
│ │ ├─context/
│ │ │ └─StoreContext.tsx
│ │ ├─errors/
│ │ │ ├─NotFound.tsx
│ │ │ └─ServerError.tsx
│ │ ├─hooks/
│ │ │ └─useProducts.tsx
│ │ ├─layout/
│ │ │ ├─App.tsx
│ │ │ ├─Footer.tsx
│ │ │ ├─Header.tsx
│ │ │ ├─LoadingComponent.tsx
│ │ │ ├─SignedInMenu.tsx
│ │ │ └─styles.css
│ │ ├─models/
│ │ │ ├─basket.ts
│ │ │ ├─order.ts
│ │ │ ├─pagination.ts
│ │ │ ├─product.ts
│ │ │ └─user.ts
│ │ ├─router/
│ │ │ ├─RequireAuth.tsx
│ │ │ └─Routes.tsx
│ │ ├─store/
│ │ │ └─configureStore.ts
│ │ └─util/
│ │ └─util.ts
│ ├─features/
│ │ ├─about/
│ │ │ └─AboutPage.tsx
│ │ ├─account/
│ │ │ ├─accountSlice.ts
│ │ │ ├─Login.tsx
│ │ │ └─Register.tsx
│ │ ├─admin/
│ │ │ ├─Inventory.tsx
│ │ │ ├─ProductForm.tsx
│ │ │ └─productValidation.ts
│ │ ├─basket/
│ │ │ ├─BasketPage.tsx
│ │ │ ├─basketSlice.ts
│ │ │ ├─BasketSummary.tsx
│ │ │ └─BasketTable.tsx
│ │ ├─budget/
│ │ │ ├─BudgetPage.tsx
│ │ │ └─budgetSlice.ts
│ │ ├─catalog/
│ │ │ ├─AnimatedTypography.tsx
│ │ │ ├─Catalog.tsx
│ │ │ ├─catalogSlice.ts
│ │ │ ├─ProductCard.tsx
│ │ │ ├─ProductCardSkeleton.tsx
│ │ │ ├─ProductDetails.tsx
│ │ │ ├─ProductList.tsx
│ │ │ ├─ProductSearch.tsx
│ │ │ └─randomTest
│ │ ├─checkout/
│ │ │ ├─AddressForm.tsx
│ │ │ ├─CheckoutPage.tsx
│ │ │ ├─checkoutValidation.ts
│ │ │ ├─CheckoutWrapper.tsx
│ │ │ ├─PaymentForm.tsx
│ │ │ ├─Review.tsx
│ │ │ └─StripeInput.tsx
│ │ ├─contact/
│ │ │ ├─ContactPage.tsx
│ │ │ ├─counterReducer.ts
│ │ │ └─counterSlice.ts
│ │ ├─home/
│ │ │ └─HomePage.tsx
│ │ └─orders/
│ │ ├─OrderDetailed.tsx
│ │ └─Orders.tsx
│ ├─index.tsx
│ ├─react-app-env.d.ts
│ ├─reportWebVitals.ts
│ └─setupTests.ts
├─.env.development
├─.env.production
├─.gitignore
├─package-lock.json
├─package.json
└─tsconfig.json
The backend directory houses the ASP .NET Core application.
- Controllers: Each controller defines the API routes and their associated logic.
- Services: Business logic and data operations are implemented in services for separation of concerns.
- Data Access: Entity Framework Core is used for database interactions, and migrations manage database changes.
- Identity: The ASP .NET Core Identity system is used for user authentication and authorization.
- Middleware: Custom middleware handles authentication and error handling.
- Backend End-points:
- Database ERD:
File structure ↓
backend
├─bin/
├─Controllers/
│ ├─AccountController.cs
│ ├─BaseApiController.cs
│ ├─BasketController.cs
│ ├─BuggyController.cs
│ ├─FallbackController.cs
│ ├─OrdersController.cs
│ ├─PaymentsController.cs
│ ├─ProductsController.cs
│ └─WeatherForecastController.cs
├─Data/
│ ├─Migrations/
│ ├─DbInitializer.cs
│ └─StoreContext.cs
├─DTOs/
│ ├─BasketDto.cs
│ ├─BasketItemDto.cs
│ ├─CreateOrderDto.cs
│ ├─CreateProductDto.cs
│ ├─LoginDto.cs
│ ├─OrderDto.cs
│ ├─OrderItemDto.cs
│ ├─RegisterDto.cs
│ ├─UpdateProductDto.cs
│ └─UserDto.cs
├─Entities/
│ ├─OrderAggregate/
│ │ ├─Order.cs
│ │ ├─OrderItem.cs
│ │ ├─OrderStatus.cs
│ │ ├─ProductItemOrdered.cs
│ │ └─ShippingAddress.cs
│ ├─Address.cs
│ ├─Basket.cs
│ ├─BasketItem.cs
│ ├─Product.cs
│ ├─Role.cs
│ ├─User.cs
│ └─UserAddress.cs
├─Extensions/
│ ├─BasketExtensions.cs
│ ├─HttpExtensions.cs
│ ├─OrderExtensions.cs
│ └─ProductExtensions.cs
├─Middleware/
│ └─ExceptionMiddleware.cs
├─obj/
├─Properties/
├─RequestHelpers/
│ ├─MappingProfiles.cs
│ ├─MetaData.cs
│ ├─PagedList.cs
│ ├─PaginationParams.cs
│ └─ProductParams.cs
├─Services/
│ ├─ImageService.cs
│ ├─PaymentService.cs
│ └─TokenService.cs
├─wwwroot/
├─.dockerignore
├─appsettings.Development.json
├─appsettings.json
├─backend.csproj
├─Dockerfile
└─Program.cs
Before you begin, ensure that you have the following prerequisites installed:
ℹ️ Gitℹ️ Node.jsℹ️ .NET 7.0 SDKℹ️ PostgreSQL
- Clone the repository:
git clone https://github.com/adelansari/fs13-FullStack-ecommerce.git- Navigate to the project directory:
cd fs13-FullStack-ecommerce- Install dependencies for the frontend:
cd frontend
npm install- Install dependencies for the backend:
cd ../backend
dotnet restore- Add environmental variables for backend:
StripeSettings:WhSecret = whsec_XXXXXXXXXXXXXXXXXXXXXXX
StripeSettings:SecretKey = sk_test_51N16aXXXXXXXXXXXXXXXXXXXXXXXXX
StripeSettings:PublishableKey = pk_test_51N1XXXXXXXXXXXXXXXXXXXXXX
Cloudinary:CloudName = dnXXXXXX
Cloudinary:ApiSecret = ocqXX_XXXXXXXXXX-XXX_XXXXX
Cloudinary:ApiKey = 63XXXXXXXXXXXXXXXX
Example:
dotnet user-secrets set "StripeSettings:PublishableKey" "pk_test_51N1XXXXXXXXXXXXXXXXXXXXXX"- Start the backend server:
cd backend
dotnet run- Start the frontend application:
cd frontend
npm start- Open your browser and go to http://localhost:3000 to access the application.
This section explains how to use the application and its features. The application has a user-friendly interface that allows you to navigate through different pages and perform various actions.
The home page displays a carousel slider with images of some products that are automatically changing. You can use the arrows to move to the next or previous slide. It also displays a welcome text with some styling. You can change the theme of the application by clicking on the toggle switch at the top left corner of the page. The App bar will display differently for no-login users, logged-in users and signed-in admin. There is animation for buttons with color changes.
Light Mode:
The catalog page displays a list of products that you can browse, search, and filter. You can use the search bar at the top of the page to enter a keyword and find products that matches your query. You can also use the filter options on the right side of the page to sort products by price or name, select products by company and category which will affect the displayed pagination. There is a loading indicator when changing pages.
Clicking on the product image will pop out a windows for a zoomed in view. Further clicking on the image will display it at full resolution.
You can "Add to cart" or view "Details" by pressing the buttons.
After clicking on the "Details" button in the catalog, you will be directed to the product page which displays the name, price (with color changing animation), description, category, company and the number of items in stock. You can also add the product to your shopping cart by clicking on the "Add to Cart" button or "Update Quantity" if the item already exist in the cart. Product image is displayed in a 3D rotating cube.
The basket page shows you the items that you have added to your shopping cart. You can view the product name, price, quantity, and subtotal for each item. You can also change the quantity or remove an item from your cart by clicking on the buttons.
The basket page also displays a summary of your order, including the subtotal, delivery fee, and total amount. You can proceed to checkout by clicking on the "Checkout" button.
The checkout page guides you through the steps of placing an order and making a payment. It includes a stepper for navigation, form validation with yup, and integration with Stripe for payment processing.
The first step is to enter your shipping address. You can fill in the fields for full name, address lines 1 and 2, city, zip code, and country. You can also check the box to save your address as default for future orders.
The second step is to review your order details. You can see a table with your order items and a summary with your subtotal, delivery fee, and total amount.
The third step is to enter your payment details. You can enter your name on card, card number, expiry date, and CVV code using Stripe elements. You can also check the box to save your card details for future payments. Since this website is a demo, it is using the test version of Stripe API so you will not be charged if you use your own debit card. However, it will still try card validation. More info here.
The final step is to confirm your order and payment. You will see a confirmation message with your order number and status.
The orders page displays a list of orders that you have placed. You can view the order number, date, status, and total amount for each order. You can also click on the "View Details" button to see more information about an order.
The order details page shows you all the items ordered, their image, price, quantity and subtotal.
The login page allows you to log in to your account using your username and password. It also includes form validation using React Hook Form and error handling using React Toastify. If you don't have an account yet, you can click on the "Sign Up" link to register.
The sign up page allows you to create an account using your email address, username, and password. It also includes form validation and error handling as well. If you already have an account, you can click on the "Log In" link to log in.
This page is the inventory management system that is accessible by Admin role only. It allows Admin to view all products, edit information, as well as create new products. It includes features such as pagination, product deletion, and form validation. The "Create" button will direct you to a form component for creating or updating product details. It utilizes various Material-UI components and React libraries such as react-hook-form for form handling and validation.
The form includes input fields such as name, company, category, price, quantity, and description. It also allows uploading an image. Upon submission, the data is sent to an API endpoint for either creating or updating a product. The component also handles canceling the editing process and displaying a preview of the uploaded image. The form is using Yup validation schema with rules for validating various fields. The fields include name, company, category (required strings), price (a required number above 100), quantityRemains (a required number greater than or equal to 0), description (a required string), and file which is a mixed type and is required when the pictureUrl field is present.
A budget app implemented using Redux toolkit. It provides functionality to add/delete deposits, add/delete expenses, save budget, and set target. It also allows for editing existing deposits and expenses. Furthermore, it generates a pie chart for each deposit and expense items.
Followings are Steps in creating this project from scratch.
Setting up:
- Creating a solution file in the directory:
dotnet new sln - Creating the backend API:
dotnet new webapi -o backend - Adding the backend server into the solution (backend.csproj):
dotnet sln add backend - Creating Product class in Entities
- Adding entity framework to backend. Openning NuGet Gallery and installing:
- Creating folder Data to store data related things and creating a
StoreContextclass and add it to service container inProgramclass. - Making sure I have installed dotnet-ef
- Doing migration when the backend api is not running using:
dotnet ef migrations add InitialCreate -o Data/Migrations - Creating the database:
dotnet ef database update - Adding seed data for products into the database using
DbInitializerclass. - Migrate and seed the data on app startup using
Programclass by creating a scope (removing old db usingdotnet ef database drop) - Creating product controller for api with the following end points:
api/productsandapi/products/{id} - Creating the .gitignore using
dotnet new gitignore - Add entity for basket/shopping cart creation and then
dotnet ef migrations add BasketEntityAdded
Running the backend app:
dotnet rundotnet watch --no-hot-reloadduring development
- Creating a react app:
npx create-react-app frontend --template typescript --use-npm
- Creating react hooks and fetching product data + configuring CORS for backend
- Adding typescript interface for Product
- Folder organization by adding layout and models into
appfolder. Also adding all app features infeaturesfolder such as react components. - Adding Material UI styling framework
- Adding image assets to public folder + some styling with Material UI
- Adding product cards and styling
- Adding light and dark theme using Material UI
- Setting up react router:
npm install react-router-dom - Adding Nav Links to header and styling
- Fetching data with axios:
npm install axioson component load - Adding a product detail page + styling
Here I will try to create a debugger and implement error handling
Adding toast notification:
npm install --save react-toastifyInstalling from NuGet Gallery:
Microsoft.AspNetCore.Authentication.JwtBearer
Microsoft.AspNetCore.Identity.EntityFrameworkCorestripe listen -f http://localhost:5000/api/payments/webhook -e charge.succeededUsing secret manager from dotnet
dotnet user-secrets init
dotnet user-secrets set "StripeSettings:PublishableKey" "SectetCodeHERE"Creating the DB
docker run --name dev -e POSTGRES_USER=EnterAUsernameHERE -e POSTGRES_PASSWORD=EnterAPAsswordHere -p 5432:5432 -d postgres:latestBuilding docker image
docker build -t DockerUsernameHere/fs13-fullstack .Running docker image
docker run --rm -it -p 8080:80 DockerUsernameHere/fs13-fullstackPushing docker changes
docker push DockerUsernameHere/fs13-fullstack:latestdotnet user-secrets set "Cloudinary:CloudName" "UsernameHere"
dotnet user-secrets set "Cloudinary:ApiKey" "ApiKeyHere"
dotnet user-secrets set "Cloudinary:ApiSecret" "ApiSecretHere"
fly secrets set Cloudinary__ApiSecret=ApiSecretHereFiles and Summary ↓
| File | Summary |
|---|---|
| AccountController.cs | The code is for an AccountController that handles account-related functionalities such as user registration, login, and retrieval of user information. It also manages user baskets and handles the retrieval and mapping of relevant data. Additionally, it provides authorization and authentication for certain actions. |
| BaseApiController.cs | The code defines a base API controller class in C# for a backend project. It extends the ControllerBase class from Microsoft.AspNetCore.Mvc, and includes attributes for identifying it as an API controller and specifying the route for the controller's URL path. |
| BasketController.cs | The code represents a web API controller for managing a shopping basket. It allows retrieving the current basket, adding items to the basket, and removing items from the basket. It interacts with a database context to store and retrieve basket data, and it also handles the identification of the buyer through a unique ID stored in cookies. |
| BuggyController.cs | The code provides an API endpoint for handling various error scenarios. It includes functionality for returning not found, bad request, unauthorized, and validation error responses. It also throws a server error exception for testing purposes. |
| FallbackController.cs | The FallbackController class is a controller that handles fallback requests. It returns the index.html file from the wwwroot folder as the response, allowing the frontend application to handle the routing. |
| OrdersController.cs | This code defines a "OrdersController" class that handles HTTP requests related to orders. It includes functionalities for retrieving orders, creating orders, and getting details of a specific order. Authorization is required for accessing these functionalities. The code interacts with a database context and performs operations such as retrieving items from a basket, updating product quantities, and saving user addresses. |
| PaymentsController.cs | The code implements a payments controller in a backend application. It includes functionalities to create or update payment intents, handle Stripe webhooks, and update order status based on payment status. |
| ProductsController.cs | The code defines a ProductsController class that handles CRUD operations for the product entity. It includes methods for retrieving all products, retrieving a single product by ID, creating a new product, updating an existing product, and deleting a product. The class utilizes AutoMapper for object mapping and ImageService for image handling. It also handles pagination and filtering of products. The CRUD operations are restricted to users with the "Admin" role. |
| WeatherForecastController.cs | This code is a backend controller that provides an API endpoint to retrieve weather forecasts. It generates random weather forecasts with dates, temperatures, and summaries. The forecasts are returned as an array of WeatherForecast objects. |
| DbInitializer.cs | The code is a database initializer that populates the database with sample data. It creates users with different roles, and adds a list of products to the database. Each product has a name, description, price, picture URL, category, company, and quantity remaining. |
| StoreContext.cs | The code represents a data context class for a store application. It extends IdentityDbContext to handle user authentication. It defines database tables for products, baskets, and orders, and establishes relationships between them. It also configures foreign key constraints and seeds roles data. |
| 20230503134701_PostgresInitial.cs | This code contains database migration scripts to create tables for user management, order management, basket management, and product management. It also includes relationships between these tables and seed data for roles. This code is vital for setting up the initial database structure and functionality for the backend application. |
| 20230503134701_PostgresInitial.Designer.cs | This code is a migration file for a PostgreSQL database in the backend of an application. It defines the database schema and relationships for various entities, including users, roles, products, baskets, and orders. It also sets up foreign key constraints and configurations for the tables. |
| 20230829163544_PublicIdAdded.cs | This code is a database migration file that adds a new column called "PublicId" to the "Products" table. The column is of type "text" and allows null values. It also includes the necessary code for reversing the migration and removing the "PublicId" column if needed. |
| 20230829163544_PublicIdAdded.Designer.cs | This code defines the database structure and relationships using Entity Framework Core migrations. It includes tables for user authentication, user roles, user addresses, baskets, basket items, orders, order items, and products. The code also sets up foreign key relationships and defines property data types. |
| StoreContextModelSnapshot.cs | This code is a database migration script generated by Entity Framework Core. It defines the database schema and relationships for a store application, including user roles, addresses, baskets, basket items, orders, order items, and products. |
| BasketDTO.cs | The code defines a data transfer object (DTO) called "BasketDto" which represents a shopping basket. It contains various properties such as an Id, BuyerId, a list of BasketItemDto objects, and PaymentIntentId. It also includes a ClientSecret property for secure communication. |
| BasketItemDto.cs | The BasketItemDto class is a data transfer object that represents a single item in a shopping basket. It includes properties for the product ID, name, price, picture URL, company, category, and quantity. These properties allow for easy communication and manipulation of basket items within the application. |
| CreateProductDto.cs | The code represents a data transfer object (DTO) used to receive input for creating a product. It includes properties for the name, description, price, image file, category, company, and quantity remaining. Validation attributes are used to enforce required fields and defined constraints. |
| LoginDto.cs | The code defines a LoginDto class that contains properties for the username and password. This class will be used for transferring login information between the client and server in a backend application. |
| OrderItemDto.cs | The code defines a "OrderItemDto" class that represents a data transfer object for an order item. It contains properties for the product ID, name, picture URL, price, and quantity. |
| RegisterDto.cs | The core functionality of this code is to create a RegisterDto class that inherits from the LoginDto class and adds an Email property. This allows for registration of users with their email credentials. |
| UpdateProductDto.cs | The UpdateProductDto class represents a data transfer object used for updating product information. It includes properties for the product's Id, Name, Description, Price, File, Category, Company, and QuantityRemains. Data annotations are used to enforce required fields and validate the input values. |
| UserDto.cs | This code defines a UserDto class for transferring user data, including email, token, username, and a reference to a BasketDto object. |
| Address.cs | The "Address" class represents a physical address with properties such as name, street address, city, zip code, and country. |
| Basket.cs | The code defines a "Basket" entity class that represents a user's shopping basket. It tracks the buyer's ID, the items in the basket, payment information, and client secret. The class also implements methods to add and remove items from the basket. |
| BasketItem.cs | The code defines the BasketItem class which represents an item in a shopping basket. It includes properties for item ID, quantity, as well as navigation properties for related Product and Basket objects. The class is annotated with the Table attribute, specifying the corresponding database table. |
| Product.cs | This code defines a Product entity with properties such as Id, Name, Description, Price, etc. It represents a product in a backend system and is used to store and retrieve product information. |
| User.cs | This code defines a "User" class that extends the IdentityUser class from the Microsoft.AspNetCore.Identity namespace. The User class contains properties such as Username, Email, and Password. Additionally, it has a reference to the UserAddress class, representing the user's address information. |
| UserAddress.cs | This code defines a UserAddress class that inherits from the Address class and adds an Id property. |
| Order.cs | The code represents the Order entity in a backend application. It includes properties such as Id, BuyerId, ShippingAddress, OrderDate, OrderItems, Subtotal, DeliveryFee, OrderStatus, and PaymentIntentId.The entity also has a method to calculate the total amount of the order. |
| OrderItem.cs | This code defines the properties and functionalities of an OrderItem in an e-commerce application, including its ID, the item ordered, price, and quantity. |
| OrderStatus.cs | The code defines an enum called OrderStatus with three possible values: Pending, PaymentReceived, and PaymentFailed. This enum represents the status of an order in an e-commerce system. |
| ProductItemOrdered.cs | The code defines the "ProductItemOrdered" class, which is used as a property in another entity. It represents an ordered product and includes properties for the product's ID, name, and picture URL. |
| ShippingAddress.cs | The code defines a class named ShippingAddress that is a child class of Address and marked as [Owned]. |
| BasketExtensions.cs | This code provides two extension methods for the Basket entity. The first method maps a Basket object to a BasketDto object, including the related Items. The second method retrieves a Basket with its related Items using the provided buyerId. |
| HttpExtensions.cs | This code extends HttpResponse functionality by adding pagination headers to the response. It serializes given metaData object to JSON and adds it to the "Pagination" header. Additionally, it adds "Access-Control-Expose-Headers" header to make "Pagination" header available to client applications. |
| OrderExtensions.cs | This code defines an extension method that converts an Order object to an OrderDto object. The OrderDto object includes selected properties from the Order object, such as Id, BuyerId, OrderDate, and total properties. It also includes a collection of OrderItemDto objects, which represent order items contained in the Order object. The method uses Entity Framework and LINQ to perform the conversion efficiently. |
| ProductExtensions.cs | The code defines extension methods for the Product entity. These methods enable sorting, searching, and filtering of Product entities in a queryable collection based on specified criteria such as price, name, company, and category. |
| ExceptionMiddleware.cs | This code represents an exception middleware responsible for handling exceptions in a web application. It logs the exception, sets the response status code to 500, and returns a JSON response with the error details. The code uses.NET Core's ILogger, IHostEnvironment, and JSON serialization functionality for this purpose. |
| MappingProfiles.cs | This code defines mapping profiles that allow for the conversion between DTOs and entity models in the backend. It maps properties from CreateProductDto and UpdateProductDto to Product entity. |
| PaginationParams.cs | The code includes a PaginationParams class with properties for page number and page size. The class ensures that the page size is limited to a maximum value of 50. The default page size is set to 6. This code helps with pagination functionalities by controlling the number of items shown per page. |
| ProductParams.cs | The code defines a class named "ProductParams" that inherits from another class named "PaginationParams". It includes properties for ordering products, searching for products, and filtering products by category and company. |
| ImageService.cs | This code implements an ImageService class that provides functionalities to add and delete images using the Cloudinary API. The class takes configuration settings from the appsettings.json file and uses the CloudinaryDotNet library to interact with the cloud storage. It has methods to add an image by uploading it to Cloudinary and delete an image by specifying its public ID. |
| PaymentService.cs | The PaymentService class provides the functionality to create or update a payment intent using Stripe API. It calculates the subtotal and delivery fee based on the items in the basket, then creates or updates the payment intent based on whether it already exists in the Basket object. The intent is returned for further processing. |
| TokenService.cs | The code is a TokenService that generates a token for authentication. It uses JWT to create a token with claims like email, username, and roles. The token is generated using a symmetric key and HMACSHA512 encryption. The token expires after 7 days. |
| index.html | This code represents a typical HTML template for a React web application. It includes necessary meta information, script, and stylesheet references, as well as a div element for rendering the application. |
| .env.development | The code enables the client-side React application to communicate with the server through a specified URL, allowing for seamless integration of backend functionalities with the frontend UI. |
| index.html | This code is a basic HTML template for a web application built using create-react-app. It includes meta tags, icons, and a root div where the application will be rendered. It also provides instructions for development and production builds. |
| index.tsx | This code sets up the core functionalities of a React application. It includes components for styling, font importing, routing, and state management with Redux. It also renders the application using ReactDOM and includes a performance measuring tool. |
| react-app-env.d.ts | The code provides references for using React Scripts, allowing for the development of React applications with key functionalities. |
| reportWebVitals.ts | The code is a wrapper function that reports web vitals, such as Core Web Vitals metrics, to a performance entry handler. It dynamically imports the'web-vitals' library and calls specific functions to get PerformanceObserver entries for each vital metric, and then sends it to the given performance entry handler. |
| setupTests.ts | The code imports and configures additional testing matchers from the jest-dom library. These matchers allow easy assertion and testing of DOM nodes in Jest tests. It enhances test readability and provides additional functionalities to the testing library. |
| agent.ts | This code defines an Axios HTTP client with interceptors and various functions for making API requests. It also includes specific functionalities for handling admin operations, catalog listings, error testing, basket operations, account management, order handling, and payment creation. |
| AppCheckbox.tsx | This code is a React component that uses the Material-UI library to render a styled checkbox. It utilizes React Hook Form for form management and props to customize its label and disabled state. It automatically synchronizes the checkbox state with the form's state. |
| AppDropzone.tsx | This code creates a dropzone component in React that accepts and displays an image file. It uses Material-UI components and react-dropzone library. The component also includes features like dynamically adjusting font size based on screen size and logging the dropped file. |
| AppPagination.tsx | The code represents a pagination component that displays information about the currently displayed results and allows users to navigate between pages. It receives metadata, such as page size, current page, total count, and total pages, and triggers a callback when the page is changed. The component renders a Typography for result information and a Pagination component for page navigation. |
| AppSelectList.tsx | This code is a custom selectable list component built with MUI and React Hook Form. It takes a label and an array of items as props, and handles the state and validation through React Hook Form. The list renders a FormControl with an InputLabel, Select, and FormHelperText to display any errors or validation messages. |
| AppTextInput.tsx | The code defines a custom text input component that integrates with react-hook-form. It accepts props for label, multiline, rows, and type. It renders a TextField component from @mui/material, passing the props and integrating with react-hook-form. It handles field validation, displays errors, and supports various text input configurations. |
| CheckboxButtons.tsx | This code snippet creates a checkbox component that allows users to select multiple options from a provided list of items. It uses the Material-UI library and React's useState hook. The component maintains the state of the checked items and calls the onChange function with the updated selections. |
| EditDialog.tsx | The code is a React component that renders a dialog for editing financial transactions. It receives props such as the dialog type (deposit or expense), title, amount, and callbacks for handling close and save actions. It includes input fields for editing the title and amount, and buttons for canceling or saving the changes. |
| RadioButtonGroup.tsx | This code defines a functional component called RadioButtonGroup. It renders a group of radio buttons wrapped in a form control. It takes in an array of options, an onChange event handler, and the selected value as props. The options are mapped to individual radio button labels and values. When a radio button is selected, the onChange handler is called with the corresponding event object. The selected value prop is used to highlight the appropriate radio button. |
| StoreContext.tsx | The code defines a React context called StoreContext, which provides functionalities to manage a shopping basket. It includes methods to remove items from the basket and update the basket state. The StoreProvider component uses the context to provide the basket state and these methods to its children components. The useStoreContext hook can be utilized within child components to access the basket state and methods. |
| NotFound.tsx | The code is the implementation of a "Not Found" page. It creates a container with a paper style and a height of 400 pixels. It displays a heading, a horizontal divider, and a button. When the button is clicked, it redirects the user to the "/catalog" page in the application. |
| ServerError.tsx | This code renders a server error page in a React application. It retrieves error details from the current location state and displays the error title and details if available. If no error is found, it displays a generic "Server error" message. The UI is styled using Material-UI components. |
| useProducts.tsx | The code is defining a custom hook called "useProducts" that retrieves products and related data from the Redux store. It uses the "useAppSelector" hook to select specific data from the store and the "useAppDispatch" hook to dispatch actions to fetch products and filters if they haven't been loaded yet. The hook returns the products, a flag for products loaded, a flag for filters loaded, and additional metadata. |
| App.tsx | This code is the main entry point of a React app. It initializes the app by fetching current user data and the user's basket from the server. It also handles a dynamic dark mode theme. Finally, it renders the app's layout, including a header, content area, and footer. |
| Footer.tsx | The code defines a React functional component called "Footer". The footer component displays a box with text displayed in the center. The text includes a link to a GitHub profile and information about the creator. The styling of the box is determined by the theme defined in the code. |
| Header.tsx | The code is a component that creates a header for a web application. It includes a responsive navigation menu with links, a shopping cart icon with a badge showing the item count, and options for light and dark mode. It also includes conditional rendering for authentication and admin roles. The component is styled using Material UI components and custom styles. |
| LoadingComponent.tsx | This code exports a functional component called LoadingComponent that displays a loading spinner with an optional message. It uses Material-UI components such as Backdrop, Box, CircularProgress, and Typography to create the loading screen. The message defaults to "Loading..." and is displayed below the spinner. |
| SignedInMenu.tsx | This code exports a functional component called "SignedInMenu" that renders a menu for signed-in users. It accepts props for customization (showOnly and variant). It uses Material-UI components like Button, Menu, MenuItem, List, ListItem, ListItemButton, ListItemText, and ListItemIcon to build the menu. The menu can be displayed as a button or a list, depending on the "variant" prop. Users can navigate to "My orders" or logout. |
| styles.css | This code defines animations for hovering over elements. It shakes an image, changes the background color of rows and table data on hover, and creates an animated title with a rotating and moving effect. The animations are achieved by applying different transformations and keyframes at specific percentages of the animation duration. |
| basket.ts | The code defines the interfaces BasketItem and Basket. BasketItem represents an item in a shopping basket, while Basket represents the shopping basket itself, including its buyer, items, and optional payment details. |
| order.ts | This code defines an interface for an order in an e-commerce system. It includes information about the buyer, shipping address, order items, and order status. Each order item contains details like product ID, name, picture, price, and quantity. The total value of the order is calculated based on the subtotal and delivery fee. |
| pagination.ts | The code provides a PaginatedResponse class that represents a response object with paginated data. It includes an array of items of generic type T and a metaData object that contains information about the pagination, such as the current page, total pages, page size, and total count. |
| product.ts | The code provides the interfaces for defining a Product object and its parameters, including attributes such as ID, name, description, picture URL, price, company, category, and quantity remaining. These interfaces can be used to handle and manipulate product data in an organized manner. |
| user.ts | This code defines a User interface with properties for the email, username, token, optionally including a Basket, and roles. It is used to represent user data and includes necessary information for authentication and authorization. |
| RequireAuth.tsx | This code is a React component called RequireAuth. Its purpose is to check if a user is authorized to access a specific area based on their roles. If the user is not logged in, they're redirected to the login page. If the user doesn't have the required roles, an error message is displayed and they're redirected to the catalog page. Redirects are handled using React Router's Navigate component. The code also references a global store and uses the react-toastify library for displaying toast notifications. Ultimately, the component renders the child components within its Outlet. |
| Routes.tsx | This code sets up the routes for a React app using react-router-dom. It defines routes for different pages, including authentication, admin, catalog, budget, and error pages. It also includes navigation and elements for each route. |
| configureStore.ts | This code sets up a Redux store with multiple slices, including counter, basket, catalog, budget, and account. It also provides hooks for accessing the store's state and dispatch function in React components. |
| util.ts | The code contains two functions: 1. "getCookie" retrieves the value of a cookie given its key from the document's cookies. 2. "currencyFormat" converts a numerical amount into a euro currency format. |
| AboutPage.tsx | The code consists of a React functional component that displays buttons to test different types of errors (400, 401, 404, 500) and a validation error. When the buttons are clicked, asynchronous functions from the API are called. If a validation error occurs, it is stored in state and displayed using MUI Alert component. |
| accountSlice.ts | This code defines a Redux slice for managing user authentication and current user data. It provides functions for user sign-in, fetching the current user, and signing out. It also handles updating the user state and displaying error messages. |
| Login.tsx | The code is a functional component for a login form that uses React, MUI (Material-UI), React Router, and React Hook Form libraries. It leverages MUI components for styling and form fields, validates user inputs, handles form submission, and dispatches a sign-in action using Redux. It also includes error handling and redirection after successful login. |
| Register.tsx | The code provides a user registration functionality for a web application. It contains form validation using react-hook-form, error handling, and submission logic. It utilizes the Material-UI library for styling components such as Avatar, TextField, and Typography. It also includes navigation using react-router-dom and displays a success message using react-toastify. |
| Inventory.tsx | This code represents an inventory management system. It allows users to view and edit product information, as well as create new products. It includes features such as pagination, product deletion, and form validation. The code utilizes Material-UI components and Redux for state management. |
| ProductForm.tsx | This code represents a form component for creating or updating product details. It utilizes various Material-UI components and React libraries such as react-hook-form for form handling and validation. The form includes input fields such as name, company, category, price, quantity, and description. It also allows uploading an image. Upon submission, the data is sent to an API endpoint for either creating or updating a product. The component also handles canceling the editing process and displaying a preview of the uploaded image. |
| productValidation.ts | This code exports a Yup validation schema with rules for validating various fields. The fields include name, company, category (required strings), price (a required number above 100), quantityRemains (a required number greater than or equal to 0), description (a required string), and file which is a mixed type and is required when the pictureUrl field is present. |
| BasketPage.tsx | This code represents the BasketPage component of a web application. It displays the items in the user's basket using a BasketTable component and renders a BasketSummary component. It also provides a button to proceed to the checkout page. If the user's basket is empty, a message is displayed instead. |
| basketSlice.ts | This code defines a Redux slice for managing the user's shopping basket. It includes functionality to fetch the basket from the server, add and remove items, and update the state accordingly. The status field tracks the asynchronous actions' state. |
| BasketSummary.tsx | This code defines a functional component called BasketSummary that displays a summary of the basket items. It calculates the subtotal based on the prices and quantities of items in the basket. It also calculates the delivery fee based on the subtotal. The component renders a table with rows for subtotal, delivery fee, and total. The delivery fee is shown only if the subtotal is below €100. |
| budgetSlice.ts | The code is a budget app implemented using Redux toolkit. It provides functionality to add/delete deposits, add/delete expenses, save budget, and set target. It also allows for editing existing deposits and expenses. |
| AnimatedTypography.tsx | This code defines a custom React component called AnimatedTypography. It uses the Fade and Typography components from the Material-UI library to create a fading animation effect on a Typography element. The animation changes the color of the text from green to orange, blue, red, and back to green in a loop. The font size of the text also adjusts based on the device screen width. |
| catalogSlice.ts | This code is responsible for managing the catalog feature in a Redux application. It includes functions for fetching products and filters, updating product parameters, and storing product data. It also handles async actions and maintains the state of the catalog. |
| ProductCard.tsx | The code is a React component that represents a product card. It displays product information such as name, price, category, and an image. Users can add the product to their cart, view product details, and view a larger image of the product. The component uses Material-UI for styling and state management. |
| ProductCardSkeleton.tsx | The code defines a reusable component called ProductCardSkeleton. It generates a skeleton preview of a product card with placeholders for its image, title, description, and actions. This is typically used to provide a loading animation while the actual product information is being fetched. |
| ProductDetails.tsx | The code implements the functionality of a product details page. It includes features such as displaying product information, adding/removing items from the shopping cart, viewing a 3D rotating cube with the product image, and zooming in on the image in a modal. The code is written in React utilizing Material-UI components for styling. |
| ProductList.tsx | The code exports a functional component called "ProductList" that takes in an array of products as a prop. It renders a grid layout using the "@mui/material" library and maps over the products to display either a skeleton loading card or the actual product card depending on whether the products are loaded or not. |
| ProductSearch.tsx | The code defines a search functionality component that utilizes Material-UI TextField. It allows users to enter a search term, which triggers a debounced search function that updates the search term value in the app state. |
| randomTest | The code includes core functionalities such as defining and implementing modular functions, handling input/output operations, implementing data structures and algorithms, ensuring error handling and validation, and optimizing performance to deliver efficient and scalable solutions. It focuses on readability, maintainability, and extensibility through clean coding principles and best practices. |
| AddressForm.tsx | The code defines an AddressForm component that displays a form with fields for the user to enter their shipping address details. It uses the Material-UI library for styling and the React Hook Form library for form state management. The component includes text input fields for full name, address, city, zipcode, and country, as well as a checkbox to save the address as the default. Once the form is submitted, the entered data can be accessed through the useFormContext hook. |
| CheckoutPage.tsx | This code is a React component for a checkout page. It includes form handling for shipping address, order review, and payment details. It integrates with Stripe for payment processing. The component manages the step-by-step progression of the checkout process, handles form validation, and displays relevant messages based on the transaction status. Overall, it provides a seamless user experience for making an online purchase. |
| checkoutValidation.ts | The code defines a validation schema using the Yup library. It validates a form containing fields such as full name, address, zip code, and country. It also checks for a card name on a credit card form. The schema ensures that certain fields are required and displays appropriate error messages when validation fails. |
| CheckoutWrapper.tsx | This code sets up a checkout page that uses the Stripe payment system. It creates a payment intent, sets the basket data in the Redux store, and then renders the checkout page with Stripe elements for card inputs. It also includes a loading component while waiting for the payment intent to be created. |
| PaymentForm.tsx | This code defines a PaymentForm component that allows users to enter credit card information. It uses Material-UI components for text inputs and checkboxes, as well as Stripe's CardNumberElement, CardExpiryElement, and CardCvcElement for secure input handling. The form also includes an option to save card details for future use. |
| Review.tsx | This code is a functional component that displays an order summary. It retrieves the state of the basket from the Redux store using the useAppSelector hook. It then renders a Typography component with the title "Order summary", followed by a BasketTable component to display the basket items (if the basket object exists), and finally renders a BasketSummary component. |
| StripeInput.tsx | This code defines a custom input component called StripeInput. It accepts props for configuration, and it can take different component types as its base. With the help of forwardRef and useImperativeHandle, it exposes a focus method through a ref, allowing programmatic focus control on the underlying input component. |
| ContactPage.tsx | The code is responsible for rendering a ContactPage component that displays a title, data, and three buttons. The buttons allow users to increment or decrement the data value using the dispatch function from Redux. The data and title values are retrieved using the useAppSelector hook. |
| counterReducer.ts | This code defines a Redux counter feature. It exports action types, a state interface, action creators for incrementing and decrementing the counter, and a reducer that handles these actions and updates the state accordingly. The initial state has a data value of 42 and a title. |
| counterSlice.ts | This code creates a Redux slice that manages a counter state. It provides actions to increment and decrement the counter value by a given payload. The initial state includes a title and a data property, with the data initialized to 42. |
| HomePage.tsx | This code is for rendering a homepage with a slider component that displays images dynamically. It utilizes the React Slick library for the carousel effect and the Material-UI framework for styling. The homepage also features a dynamic title with animated effects. |
| OrderDetailed.tsx | This code exports a React component called "OrderDetailed" that displays details about an order. It takes in an "order" object and a function to update the selected order. The component calculates the subtotal based on the items in the order and renders the order's ID and status. It also shows a button to go back to the orders list. The order items are displayed in a table using the "BasketTable" component, and the subtotal is shown below using the "BasketSummary" component. |
| Orders.tsx | This code creates a component in React that renders a table of orders. It fetches the orders from an API and displays them in a table format. Clicking on a specific order row expands it to show detailed information. The code also includes some styling for the table. |
- []
ℹ️ Task 1: Adding new categories or companies in the inventory.ℹ️ Task 2: Add user profile page with address details.ℹ️ ...
Contributions are always welcome! Please follow these steps:
- Fork the project repository. This creates a copy of the project on your account that you can modify without affecting the original project.
- Clone the forked repository to your local machine using a Git client like Git or GitHub Desktop.
- Create a new branch with a descriptive name (e.g.,
new-feature-branchorbugfix-issue-123).
git checkout -b new-feature-branch- Make changes to the project's codebase.
- Commit your changes to your local branch with a clear commit message that explains the changes you've made.
git commit -m 'Implemented new feature.'- Push your changes to your forked repository on GitHub using the following command
git push origin new-feature-branch- Create a new pull request to the original project repository. In the pull request, describe the changes you've made and why they're necessary. The project maintainers will review your changes and provide feedback or merge them into the main branch.
ℹ️ This is my final project during the Fullstack Development module in Integrify Academy. My sincere thanks to **Alia Nguyen** for being my instructor and her continuous guidance throughout.