/macloops

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

Primary LanguageJavaScriptMIT LicenseMIT


GitHub repo size GitHub watchers GitHub language count GitHub code size in bytes

Contributors Forks Starsgazers

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

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

  • React
  • Express
  • Mongodb
  • jwt
  • bootstrap
  • nodemon

(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

Homescreen 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 The Instruments page displays all instruments in the database that are available, and you can paginate through the Instruments page.


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


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 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 Users can register or login into the system.


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


404 Error page 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


Use Case

Use Case Diagram


Wireframes

Homescreen wireframe Home screen wireframe

Cart wireframe Cart wireframe

Login wireframe Login wireframe

Register 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
Eddie Sosera


License

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


Contact

LinkedIn - @eddiesosera, or Visit website.


(back to top)