Content 📝
The purpose of this project is to carry out a comprehensive implementation using fullstack development technologies, contributing to this repository with the front-end section and deploying it on AWS. JavaScript with React and Redux has been employed, in addition to CSS for design.
This is an MVP of a social network with an interface entirely based on a system of cards of different sizes. The platform is designed to create a community of people interested in sharing audio tracks hosted on other services.
'Bands' are created, groups where the user with the role of 'band leader' creates a 'multitrack', a playlist, and proposes a theme. Other users can join and collaborate by uploading their own tracks, and when the 'band leader' deems it appropriate, a 'song', a collaborative audio track, is published as a result.
Front-end MVP for a Social Platform, emphasizing sound sharing and fostering collaborative composition creation among users. This project represents the culmination of the GeeksHubs Academy fullstack developer bootcamp.
This is frontend app of a previously finished backend project on:
https://github.com/paco-fuentes/API-truck-4-tracks
Download and follow install intructions. You can populate your database with included sql insert files.
Then clone this repository.
Open terminal on project folder:
- Clone this repo
git clone url
- Install dependencies
npm i
- Run this project in dev mode:
npm run dev
- Press 'o' and ENTER on the terminal window to open localhost: on your browser.
/home : main view
![](/paco-fuentes/frontend-truck4tracks/raw/main/public/img_readme/home.png)
/register : user register view
![](/paco-fuentes/frontend-truck4tracks/raw/main/public/img_readme/register.png)
/ login : login registered users and admin
![](/paco-fuentes/frontend-truck4tracks/raw/main/public/img_readme/login.png)
/register and login overview
![](/paco-fuentes/frontend-truck4tracks/raw/main/public/gifs_readme/reg-log.gif)
/bands : select band view
![](/paco-fuentes/frontend-truck4tracks/raw/main/public/img_readme/bands.png)
/band/id : select band view (detail)
![](/paco-fuentes/frontend-truck4tracks/raw/main/public/img_readme/band-1.png)
/band/id : select band view (detail)
![](/paco-fuentes/frontend-truck4tracks/raw/main/public/img_readme/band-2.png)
/ main : user overview
![](/paco-fuentes/frontend-truck4tracks/raw/main/public/gifs_readme/overview.gif)
/profile : profile view (detail)
![](/paco-fuentes/frontend-truck4tracks/raw/main/public/img_readme/profile.png)
/profile : edit profile and create a new band
![](/paco-fuentes/frontend-truck4tracks/raw/main/public/gifs_readme/profile-2.gif)
/bandmembers : manage band
![](/paco-fuentes/frontend-truck4tracks/raw/main/public/img_readme/members.png)
/band : chat
![](/paco-fuentes/frontend-truck4tracks/raw/main/public/gifs_readme/chat.gif)
/band : sharing a track with your band
![](/paco-fuentes/frontend-truck4tracks/raw/main/public/gifs_readme/upload-2.gif)
/admin : get all users and delete selected user
![](/paco-fuentes/frontend-truck4tracks/raw/main/public/img_readme/admin.png)
/admin : overview
![](/paco-fuentes/frontend-truck4tracks/raw/main/public/gifs_readme/admin.gif)
In the future, users will have the ability to search for each other based on styles, skills, and instruments, as well as to publish articles for reading and proposals from staff, collaborators, and sponsors.
Next additions:
- Redux
- Tailwind
This project is under an MIT license.
Paco Fuentes. 2023