Skip to content

juliaDooby/React-Spotify-platform

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React-Spotify-Music-platform

React Redux React Hooks Cors Javascript TypeScript SASS RestAPI NestJS Next JS Next Router Use Actions Seo-optimization ESLint


Features:


Here's features included in this project

BACKEND:

  • Designing database diagrams.
  • Service, Module, Modulator
  • Connect to the database, describe the data schema
  • REST API, DTO
  • File upload, static distribution, FileService
  • CORS, completion of server development

FRONTEND:

  • Creation of the NEXT project

  • Player location

  • Page with step-by-step track creation

  • File upload component

  • Player logic, Redux connection, next Redux wrapper

  • Typing PlayerReducer

  • Custom hooks useActions, useTypedSelector

  • Action creators

  • Working with the Audio object in the browser, playing a track

  • Custom hook using Input

  • Creating a track, requesting a server, sending files

  • SEO optimization, title, title, meta

  • Search for tracks, optimize search queries


Backend Summary:

  1. There is a main AppModule in which all other modules are connected
  2. The module is an isolated environment, allowing you to quickly navigate and develop the application
  3. Each module has its own services, circuits, controllers
  4. The controllers work with requests, responses, and the client-server component
  5. Diagrams describe the data with which interaction takes place.
  6. In the DTO we describe the objects that are expected as input in some functions in the controllers
  7. As a result, all this is connected to the Web Module, which was later defined as the main one when the application was launched in the main file
  8. Cors for sending requests from the browser

Technologies Used:


  1. React
  2. Redux
  3. Hooks
  4. Cors
  5. Typescript
  6. Rest-api
  7. Scss
  8. Nest
  9. Seo-optimization
  10. Next
  11. Useactions
  12. Axios-react

How to start?


To start the project along with me just download the start-up file and run available script
// first install all necessary dependencies

npm i

// next run

npm start