• This application offers a wide range of affordable smart home devices products at the moment where electronic equipments are unaffordable out of reach for the majority of consumers.
• It is designed to help people buy electronic goods at a low-cost price. The application predominantly specializes in smart home devices only which allow customers to find these products easily without having to search the key term "smart home devices" or "smart electronic home appliances" when they are browsing on a similar application. The application also offers a bundle options; customer can select these bundle which consists of multiple electronic products rather than select each product at a time.
• This application provides a list of home device products labeled and grouped based on their category. User will automatically see a displayed UI feature of the product categorization which helps enhance their shopping experience.
• This application also provides a webpage feature which display a list of grouping products (from different category) in a bundle (product combo or package) at a reasonable price to allow the user to select and purchase without having to browse through other product webpage based on their category.
• An integration with third-party login providers (Google) is included in the application.
• This application contains a data visualization for seller(admin) to track the product status.
• While the HomeTech Space does provide a viable choice for user to browse through products, we hope to implement a "popular section" feature to allow customer to look at the platform's best-selling product. We also hope to build a customization webpage feature that allows user to select their product from scratch. While our bundle options does provide somewhat similar feature, the products in the bundle are pre-selected by the store and user are not allowed to adjust and select their own preferred product in the bundle. It would be amazing to also include a customer's review section for product reviews.
• HomeTech Space is an electronic e-commerce site that allow customers to browse and purchase product of various categories offered. User should be able to explore the products based on the categories alongside with the filtering options that help narrow down user's ideal product.
• (All users) should be able to sign up, log in, and log out of the market application with appropriate role.
• (Each user) should be able to view the browse and view the product catalog and detail as a guest (without signing in). User can select the product with and add to cart without registering or signing in.
• (Registered user) should be able to browse through the product catalog, view product details, and add products to cart. Most importantly, they can also check out securely with Cash On Delivery options, view order history, track order updates, and cancel orders.
• (Only Admin) can create and manage (update, remove) product listings, including details such as title, description, price, and images ...etc.
• Admin should receive order and update the delivery status of the order (triggers automated notifications to be sent to the customers).
• Admin should have a dashboard page where they can view key information such as product inventory, total registered customers, total revenue...etc. They can also view and filter total orders by status.
• [ ] As a user, I can sign in with my email and password.
• [ ] As a user, I can register for a new account with email and password.
• [ ] As a user, I can stay signed in after refreshing the page.
• [ ] As a user, I can see my current profile info (name, email address, password, and role).
• [ ] As a user, I can update my profile (Avatar, Address, Phone Number).
• [ ] As a user, I can see a list of products
• [ ] As a user, I can add a product to my cart.
• [ ] All products should contain information => name, description, price, and category.
• [ ] As a user with role 'admin', I can add a new product to the list.
• [ ] As a user with role 'admin', I can update and remove a product.
• [ ] As a user, I can see a list of product bundles.
• [ ] As a user with role 'admin', I can add a new bundle.
• [ ] As a user with role 'admin', I can update or remove a bundle.
• [ ] As a user, I can see a list of categories- contains products that are related to that category.
• [ ] As a user, I can check out my order
• [ ] As a user, I can see my order information and status.
• [ ] As a user, I can cancel my order.
• [ ] As a user with role 'admin', I can see all orders.
• [ ] As a user with role 'admin', I can update the status of the order.
To have this app running on your local computer, please follow the below steps:
Clone repository
$ git clone https://github.com/huyh1010/HomeTech-Space-FE.gitNavigate to the project folder:
$ cd HomeTech-Space-FEInstall project dependencies:
$ npm installSet up environment variables (create an .env file)
REACT_APP_BACKEND_API = "";
REACT_APP_CLOUDINARY_CLOUD_NAME = "";
REACT_APP_CLOUDINARY_UPLOAD_PRESET = "";REACT_APP_BACKEND_API - enter the following link for api
REACT_APP_BACKEND_API = "https://hometech-space-backend.onrender.com";REACT_APP_CLOUDINARY_CLOUD_NAME & REACT_APP_CLOUDINARY_UPLOAD_PRESET
- Navigate to Cloudinary and sign in.
- Once signed in, you will be navigate to the Dashboard.
- In the Dashboard section, will find Cloud Name section. Copy the name of the Cloud Name and place it into your REACT_APP_CLOUDINARY_CLOUD_NAME
ex:
ex:
REACT_APP_CLOUDINARY_CLOUD_NAME = "colbyfree";- Select Setting > Upload, and then scroll to the Upload presets section.
- Create a new upload preset by clicking Add upload preset at the bottom of the upload preset list.
- Once finished, copy the name of the "upload" preset and place it into your REACT_APP_CLOUDINARY_UPLOAD_PRESET variable
ex:
REACT_APP_CLOUDINARY_UPLOAD_PRESET = "ml_default";Run the project:
$ npm start• Material UI • axios • Chart JS, REACT Chart JS • lodash • numeral • react drop-zone • react hook-form • react redux • react dom • yup • jwt-decode • react-toastify • rehype-raw • redux-persist