eddiesosera/macloops

Macloops is a MERN ecommerce dashboard designed for musicians React.js and Express.js.

Macloops

Macloops: A MERN Stack E-Commerce Dashboard for Musicians

Eddie Sosera

Explore the docs

View Demo · Report Bug · Request Feature

About this Project

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
• Installation
• Features
• Technical Functionality
• Development Process
• Final Outcomes
• Reporting Issues
• Authors
• Licenses
• Contact

Built With

• 
• 
• 
• 
• 
• 

(back to top)

Installation

1. Clone the repo

   git clone https://github.com/eddiesosera/macloops.git

2. Install NPM packages

   npm install

3. Start the client server in client/term4-group2-qna

   npm start

4. Start the backend server in server file

   npm run dev

(back to top)

Features

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.

The Instruments page displays all instruments in the database that are available, and you can paginate through the Instruments page.

The product page has all the information about the instrument, information such as the specifications, descriptions and similar instruments.

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.

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.

Users can register or login into the system.

The admin’s view gives the admin special permission to delete ant user’s instruments.

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

Use Case

Wireframes

Home screen wireframe

Cart wireframe

Login wireframe

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

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 on GitHub.

Authors

_{Eddie Sosera}

License

Distributed under the MIT License. See License for more information.

Contact

LinkedIn - @eddiesosera, or Visit website.

(back to top)