Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/kalabamssalu/addismusicapp

This repository contains the Addis Music website application, a comprehensive solution built with the MERN stack (MongoDB, Express.js, React.js, Node.js). It features a full-fledged backend API using Express.js and MongoDB for managing data and user interactions, coupled with a dynamic and responsive frontend developed with React.js.
https://github.com/kalabamssalu/addismusicapp

emotion-css expressjs mern-stack music nodejs reactjs styled-components

Last synced: about 1 month ago
JSON representation

This repository contains the Addis Music website application, a comprehensive solution built with the MERN stack (MongoDB, Express.js, React.js, Node.js). It features a full-fledged backend API using Express.js and MongoDB for managing data and user interactions, coupled with a dynamic and responsive frontend developed with React.js.

Awesome Lists containing this project

README 

        
# Addis Music Application 



**Task breakdown for the Addis Software Test Project - MERN Stack**

## Project Objective

Creating a music website application using MERN stack.



# Tasks Progress



### 1. Make a folder **"AdissMusicApp"**

   

        mkdir AdissMusicApp



### 2. Create a github repository **"addisMusicApp"** 

   

   - On GitHub create a new repository named "addisMusicApp".

### 3. Create a frontend



        npm create-react-app frontend --template typescript



### 4. Create a backend 



        npm init -y



### 5. Install required packages 



----

### Frontend Package



**- Install emotion Styled System**   



    npm i @emotion/styled @emotion/react @emotion/core



**- Install Redux Toolkit**



    npm install @reduxjs/toolkit

    npm install react-redux

**- Install Redux-Saga**



    npm install redux-saga

**- Install Styled system**



    npm i styled-system styled-components @types/styled-components

**- Install React-Router-Dom**



    npm install react-router-dom

---



### Backend Package



**- Install Mongoose, express, cors**



    npm intall mongoose express cors

**- Install Nodemon**



    npm install nodemon

**- Install dotenv**



    npm install dotenv

**- Install cookie parser**



    npm install cookie-parser

---



# Backend Development 



### 6. Define Song Model, Controller, routes



Define MongoDB schema for songs Include fields:

- Title

- Artist

- Album

- Genre



### 7. Define User Model, Controller, routes 



Define MongoDB schema for User Include fields:

- name

- email

- password

  

### 8. Develop REST API Endpoints



- Create endpoint to create a new song

- Create endpoint to list all songs

- Create endpoint to update a song

- Create endpoint to delete a song

- Create endpoint to create a new user

- *---Create endpoint to list all users*

- Create endpoint to update a user

- Create endpoint to delete a user



### 7. Authentication setup

- Create Authentication 

- Create a middleware

  



### 9. Implement Statistics Endpoints



- Create endpoint to calculate and return overall statistics



- Include statistics such as total songs, artists, albums, genres, songs per genre, etc.

  

### 10. Test API Endpoints



- Write unit tests for each endpoint using testing frameworks like Jest

- Test API functionality using Thunder Client

  

### 11. Dockerize Backend



- Create Dockerfile for backend

- Docker-compose for MongoDB and backend

  



---

---

---

---

---

---



# Frontend Development



### Set Up React App



- Initialize React project with Typescript

- Install required packages (Redux Toolkit, Redux-Saga, Emotion, Styled System)



### Create Song Listing Page



- Design UI for displaying list of songs

- Fetch songs from backend API and display them

- Implement functionality to add, update, and delete songs

- Update UI dynamically when songs are added, updated, or deleted without page reload



### Implement Statistics Section



- Design UI to display overall statistics

- Fetch statistics data from backend API and display them



### Add Filtering Functionality



- Implement filtering functionality, such as filter by genre

- Update song list based on applied filters



### Integration with Backend



- Integrate frontend with backend REST API endpoints

- Test integration and ensure proper data flow between frontend and backend



### Testing and Debugging



- Write unit tests for components and Redux logic

- Test UI functionality and behavior

- Debug and fix any issues



### Deploy Frontend



- Host frontend application on platforms like Netlify or Vercel



### Bonus Tasks



- Implement additional features like user 

    - authentication, 

    - search functionality, etc.

- Deploy backend using platforms like Heroku or Render