https://github.com/eddiesosera/macloops
Macloops is a MERN ecommerce dashboard designed for musicians React.js and Express.js.
https://github.com/eddiesosera/macloops
bcrypt dashboard ecommerce ecommerce-dashboard expressjs jwt mongodb mongoosejs music react
Last synced: 3 months ago
JSON representation
Macloops is a MERN ecommerce dashboard designed for musicians React.js and Express.js.
- Host: GitHub
- URL: https://github.com/eddiesosera/macloops
- Owner: eddiesosera
- License: mit
- Created: 2023-07-12T13:26:23.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-11-10T04:39:07.000Z (over 2 years ago)
- Last Synced: 2025-07-18T06:55:39.293Z (12 months ago)
- Topics: bcrypt, dashboard, ecommerce, ecommerce-dashboard, expressjs, jwt, mongodb, mongoosejs, music, react
- Language: JavaScript
- Homepage:
- Size: 97.3 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[![Contributors][contributors-shield]][contributors-url]
[![Forks][forks]][forks-url]
[![Starsgazers][stars]][stars-url]
#
![Banner][banner]
Macloops
Macloops: A MERN Stack E-Commerce Dashboard for Musicians
Eddie Sosera
Explore the docs
View Demo
·
Report Bug
·
Request Feature
## About this Project
![Header][header]
Macloops is a musician-focused e-commerce dashboard designed as a dynamic hub. It provides user-friendly features for easy inventory navigation, sales tracking, and order management.
# Table of Contents
- [Built With](#built-with)
- [Installation](#installation)
- [Features](#features)
- [Technical Functionality](#technical-functionality)
- [Development Process](#development-process)
- [Final Outcomes](#final-outcomes)
- [Reporting Issues](#reporting-issues)
- [Authors](#authors)
- [Licenses](#licenses)
- [Contact](#contact)
## Built With
- [![React][react.js]][react-url]
- [![Express][express.js]][express-url]
- [![Mongodb][mongodb]][mongodb-url]
- [![jwt][jwt]][jwt-url]
- [![bootstrap][bootstrap]][bootstrap-url]
- [![nodemon][nodemon]][nodemon-url]
## Installation
1. Clone the repo
```sh
git clone https://github.com/eddiesosera/macloops.git
```
2. Install NPM packages
```sh
npm install
```
3. Start the client server in `client/term4-group2-qna`
```sh
npm start
```
4. Start the backend server in `server` file
```sh
npm run dev
```
## Features
![Homescreen][home]
The home screen allows users to engage with the carousel at the top to gain more info about the project.
The home screen shows all discounted products on sale.
![instruments][instruments]
The Instruments page displays all instruments in the database that are available, and you can paginate through the Instruments page.
![Product Page][productpage]
The product page has all the information about the instrument, information such as the specifications, descriptions and similar instruments.
![Account][account]
The user has their account page and they can login, sign up or edit their account details.
The “View as Admin” is only visible for admin accounts.
![Cart][cart]
The Cart page is a list of all the instruments the user wishes to buy. The user can add, remove and update the quantity of each item in the cart.
![Onboarding][onboarding]
Users can register or login into the system.
![Orders][orders]
The admin’s view gives the admin special permission to delete ant user’s instruments.
![404 Error page][404error]
This is a central page for pages not found. This is intended to help with a good user flow.
#### Technical Funtionality
- `CRUD funtionality` on instruments, Answers, Replies(additional) and Users.
- `CRUD functionality` on cart items.
- `Search and Filter` instruments being displayed.
- `Authentication` using password encryption library.
- `Authorization` using tokens (JWTs).
- `Approved orders` only by admin.
#### Flow Diagram
![Flow Diagram][flowdiagram]
#### Use Case
![Use Case Diagram][usecase]
#### Wireframes
![Homescreen wireframe][wf-home]
_Home screen wireframe_
![Cart wireframe][wf-cart]
_Cart wireframe_
![Login wireframe][wf-login]
_Login wireframe_
![Register wireframe][wf-register]
_Register wireframe_
## Development Process
The `Development Process` the technical implementations and functionality done for the website.
#### Highlights
thoroughly enjoyed the project's structure, as it provided me with the chance to delve into intricate tasks, such making my own API and connecting it to the client side. I thought that was fun.
#### Challenges
Overall the project was relatively easy to understand but really time consuming. I found state management to daunting for this task and I could have made use of libraries such as redux.
## Final Outcomes
[View Demonstration](https://drive.google.com/file/d/1xJGy-j4TskFiKSpnWFAl9HrnYCG_uiMS/view?usp=sharing)
## Conclusion
### How to Contribute
1. **Fork the repository:**
- Fork this repository to your GitHub account.
2. **Clone your fork:**
- Clone the repository to your local machine using the following command:
```
git clone https://github.com/eddiesosera/macloops.git
```
3. **Create a branch:**
- Create a new branch for your feature or bug fix:
```
git checkout -b feature-branch
```
4. **Make your changes:**
- Make your desired changes in the codebase.
5. **Test your changes:**
- Ensure that your changes do not introduce new issues.
- Run relevant tests if available.
6. **Commit your changes:**
- Commit your changes with a descriptive commit message:
```
git commit -m "Your informative commit message"
```
7. **Push your changes:**
- Push your changes to your forked repository:
```
git push origin feature-branch
```
8. **Create a pull request:**
- Open a pull request against the `main` branch of the original repository.
- Provide a clear title and description for your pull request.
### Reporting Isssues
If you encounter any issues or have suggestions, please [open an issue](https://github.com/eddiesosera/macloops/issues) on GitHub.
### Authors
Eddie Sosera
### License
Distributed under the MIT License. See [License](https://opensource.org/license/mit/) for more information.
### Contact
**LinkedIn** - [@eddiesosera](https://www.linkedin.com/in/eddiesosera/), or
[Visit website](https://engineeredimagination.co.za).
[react.js]: https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB
[react-url]: https://reactjs.org/
[express.js]: https://img.shields.io/badge/express.js-%23404d59.svg?style=for-the-badge&logo=express&logoColor=%2361DAFB
[express-url]: https://expressjs.com/
[mongodb]: https://img.shields.io/badge/MongoDB-%234ea94b.svg?style=for-the-badge&logo=mongodb&logoColor=white
[mongodb-url]: https://www.mongodb.com/
[jwt]: https://img.shields.io/badge/JWT-black?style=for-the-badge&logo=JSON%20web%20tokens
[jwt-url]: https://jwt.io/
[bootstrap]: https://img.shields.io/badge/bootstrap-%238511FA.svg?style=for-the-badge&logo=bootstrap&logoColor=white
[bootstrap-url]: https://getbootstrap.com/
[nodemon]: https://img.shields.io/badge/NODEMON-%23323330.svg?style=for-the-badge&logo=nodemon&logoColor=%BBDEAD
[nodemon-url]: https://nodemon.io/
[contributors-shield]: https://img.shields.io/github/contributors/eddiesosera/macloops.svg?style=for-the-badge
[contributors-url]: https://github.com/eddiesosera/macloops/graphs/contributors
[forks]: https://img.shields.io/github/forks/eddiesosera/macloops.svg?style=for-the-badge
[forks-url]: https://github.com/eddiesosera/macloops/forks
[stars]: https://img.shields.io/github/stars/eddiesosera/macloops.svg?style=for-the-badge
[stars-url]: https://github.com/eddiesosera/macloops/stargazers
[eddie-img]: https://github.com/eddiesosera.png*-
[demo]: client/src/assets/readme/demo.mp4
[banner]: client/src/assets/readme/banner.png
[header]: client/src/assets/readme/header.png
[home]: client/src/assets/readme/features/macloops_feature_home.png
[instruments]: client/src/assets/readme/features/macloops_feature_instruments.png
[productpage]: client/src/assets/readme/features/macloops_feature_productPage.png
[account]: client/src/assets/readme/features/macloops_feature_account.png
[cart]: client/src/assets/readme/features/macloops_feature_cart.png
[onboarding]: client/src/assets/readme/features/macloops_feature_onboarding.png
[orders]: client/src/assets/readme/features/macloops_feature_orders.png
[404error]: client/src/assets/readme/features/macloops_feature_404error.png
[usecase]: client/src/assets/readme/process/useCase.png
[flowdiagram]: client/src/assets/readme/process/flowDiagram.png
[wf-home]: client/src/assets/readme/wireframes/home.png
[wf-cart]: client/src/assets/readme/wireframes/cart.png
[wf-login]: client/src/assets/readme/wireframes/login.png
[wf-register]: client/src/assets/readme/wireframes/register.png