World of Furniture
Web Application Development
International University - VNU
Report Bug
·
Request Feature
[![Contributors][contributors-shield]][contributors-url] [![Forks][forks-shield]][forks-url] [![Issues][issues-shield]][issues-url]
- 📚 About
- 🚀 Reason
- 🛠 Technologies Used
- 🧩 Methodology
- 📊 Diagrams
- 🔧 Installation
- 📸 Demo - Result
- 🤝 Contributing
- 📄 License
- 📧 Contact
- 🙏 Acknowledgements
| No. | Full Name | Student's ID | Github account | Roles | Contribution | |
|---|---|---|---|---|---|---|
| 1 | Pham Gia Bao | ITITIU20166 | ITITIU20166@student.hcmiu.edu.vn | giabao18 | PROJECT MANAGER Back-end Developer | 25% |
| 2 | Dao Minh Huy | ITCSIU21132 | ITCSIU21132@student.hcmiu.edu.vn | meowie2k3 | Back-end Developer | 25% |
| 3 | Nguyen Luan Cong Bang | ITITIU20163 | ITITIU20163@student.hcmiu.edu.vn | congbangitiu | Frond-end Developer | 25% |
| 4 | Pham Minh Vu | ITITIU20354 | ITITIU20354@student.hcmiu.edu.vn | PMinhVu | Frond-end Developer | 25% |
The furniture trading platform FurniScape provides a comprehensive digital marketplace for individuals to buy and sell a wide range of furniture items. It includes various services such as product search, product listings, and online transactions between buyers and sellers.
The FurniScape project offered a valuable opportunity to leverage modern web development techniques and technologies to address real-world challenges in the furniture trade industry. The team has adopted a robust Model – View – ViewModel (MVVM) architectural pattern, utilizing leading web frameworks to create a comprehensive and user-friendly e-commerce solution for the furniture marketplace.
To be short, the project aims achieve these goals:
-
Backend Development: Utilize Node.js to create a secure and scalable server-side infrastructure, managing user authentication, product data, and transactions.
-
Frontend Development: Implement a dynamic and responsive user interface using React.js, with Redux for efficient state management and Axios for seamless data fetching.
-
Architecture: Adhere to the MVVM (Model-View-ViewModel) architectural pattern to separate the development of the graphical user interface from the business logic, enhancing code maintainability and scalability.
-
Database Management: Ensure data integrity and security with a robust database solution, efficiently handling large volumes of product and user information.
-
API Integration: Develop and integrate RESTful APIs to facilitate communication between the frontend and backend, ensuring a smooth and responsive user experience.
The FurniScape project was conceived to address the growing need for a streamlined digital platform that simplifies and enhances the furniture trading experience. By leveraging the latest web technologies, the team aims to empower both buyers and sellers with convenient search tools, seamless booking capabilities, and secure transaction processes. The ultimate goal is to create a one-stop destination that modernizes the furniture marketplace, driving greater accessibility and economic opportunities for all participants in the industry.
The core idea behind FurniScape is to create a personalized and data-driven furniture marketplace that caters to the unique preferences and needs of each user. Leveraging the power of modern web technologies, the platform will implement sophisticated recommendation algorithms powered by machine learning to analyze user browsing behavior, purchase history, and preferences, allowing it to suggest furniture items tailored to their individual taste.
Furthermore, FurniScape will integrate augmented reality (AR) features that enable users to virtually place furniture items in their own living spaces, facilitating seamless visualization of how the furniture will look and fit in their home environment. By delivering a personalized, data-driven, and community-focused furniture marketplace, FurniScape aims to revolutionize the way people discover, visualize, and purchase furniture for their homes and workspaces.
- [✔] Users of the forum: admin, user.
- [✔] Activities of user: read, buy, sell product; registry for the system to remind new message appearing in favor threads.
- [✔] Activities of Admin: Manage the user as well as product, create/remove user(soft remove) and product.
- [✔] Database design: 7 tables with achievement BC form.
- More to come...
Please see the open issues for a full list of proposed features ( and known issues).
-
Backend: NodeJS, ExpressJS
-
Frontend: ReactJS, Redux, Axios
-
Database: MySQL
-
Styling: CSS, Antd
-
Version Control: Github
-
Ide: Visual Studio Code
-
User Registration and Authentication: Users can create accounts and log in securely.
-
Product Listing and Details: Users can browse and view detailed information about products.
-
Patient Dashboard: When the user logs in with the patient's account, this page will appear to show all the operations related to them, including their recent healing sessions.
-
Add to Cart and Checkout: Users can add products to their cart and complete the purchase process.
-
User Dashboard for Order Management: Users can view and manage their past orders.
-
Admin Panel for Managing Products and Orders: Admins can add, update, and delete products and manage customer orders.
The MVVM (Model-View-ViewModel) pattern is a software design pattern that is used in software engineering. It is a derivation of the Model-View-Controller (MVC) pattern, and is mostly used for building user interfaces.
Model(node.js): The Model represents the data and the business logic of the application. It is responsible for managing the data, regardless how this data is presented to the user.
-
Data Models: Define schemas for products, users, and admins. This involves structuring the data for each entity.
-
Business Logic: Implement CRUD(Create, Read, Update, Delete) operations and any additional business rules or calculations necessary for the application.
View(React.js): The View is responsible for displaying the data to the user and capturing user interactions.
-
Component: Create components for various parts of the application, such as product, listings, dashboard...
-
User Interface: Design the layout and appearance of the application using Javascript and CSS, ensuring a responsive and user-friendly interface.
ViewModel(Redux & Axios): The ViewModel acts as an intermediary between the View and the Model. It provides data from the Model to the View and processes user interactions before sending them to the Model.
-
State Management with Redux: Define actions, handle state changes and provide a way for components to access specific pieces of the state.
-
Data Fetching with Axios: Use Axios to make HTTP requests to Backend, retrieving data and dispatch action based on the results of these API calls to update the state.
Separation of Concerns:
-
The backend( Node.js) handles the data and business logic (Model).
-
The frontend (React.js) manages the user interface (View).
-
Redux and Axios bridge the gap between the two, handling state management and data fetching (ViewModel).
Maintainability:
-
By separating the application into distinct layers (Model, View, ViewModel), each part can be developed, tested, and maintained independently.
-
This separation allows for easier updates and scalability.
Scalability:
-
As the application grows, new features can be added to each layer without impacting the others.
-
The MVVM pattern facilitates adding new components, state management logic, and data handling capabilities.
Description: This diagram shows the interactions between different user types (e.g., user and admin) and the system, depicting various use cases such as finding products, adding products, ordering products, and managing feedback.
Description: The ERD depicts the data relationships between entities in the system, such as users, products, orders, and payments, helping to visualize how data is interconnected.
Description: This class diagram for FurniScape includes key entities: User (manages user details and links to orders and comments), Product (contains product details and links to orders and comments), Cart (handles shopping cart functionalities), Order (details order information and links to payments), OrderDetail (provides order specifics), Comment (holds product comments), and Payment (manages payment details).
Description: The MVVM model for FurniScape has three layers. The Model manages data and business logic (e.g., Order.js, Product.js). The ViewModel processes this data and communicates changes to the View. The View includes user interface components and pages like Home.tsx and Shop.tsx, displaying data and handling user interactions.
User Registration: This diagram explains the user registration process, highlighting the steps for entering user information, checking username availability, and validating the form.
Login Process: This diagram outlines the user login process, showing the interactions between the user, the login form, the controller, and the database.
Add product to Cart: The diagram illustrates the process of adding a product to the cart.
Checkout Process: The diagram details the checkout process. It includes steps for getting items the cart, creating an order and handling payment verification
Product Rating: TThis diagram describes the product rating process, including checks to ensure that the product has been paid for before allowing a rating to be submitted.
-
Clone the repo
git clone https://github.com/congbangitiu/FurniScape.git
-
Open in Visual Studio Code
-
Install backend dependencies:
cd api npm install -
Install backend dependencies:
cd ../furniture-world npm install -
Run the frontend server:
cd ../furniture-world npm start / yarn start -
Run the backend server:
cd ../api npm start / yarn start
Sample of the program screenshots that demo the project's current build:
- Sign In/Out page
- Home page
- About page
- Profile page
- Contact page
- Shop page
- Cart page
- Checkout page
- User management page
- Product management page
- Order management page
(and more screenshots hidden for you to explore yourself in our application...)
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!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under MIT License. See the License file for details.
For any inquiries of feedback, please contact:
-
Pham Gia Bao by Email HERE
-
Project Link: https://github.com/congbangitiu/FurniScape
You can also reach out to other team members:
We want to express our sincerest thanks to our lecturer and the people who have helped us to achieve this project's goals:
- Assoc. Prof. Nguyen Van Sinh
- MSc. Nguyen Trung Nghia
- The README.md template from othneildrew