My First React Project

Podcast Platform

My training project experience (building a project from scratch)

About the project

Podcast Platform is where any user is just a registration away from expressing themselves by uploading their videos.Any user can be a creator or a viewer.He/she can either be entertained or entertain others with their creation and engage with their content by liking the video and commenting on it.

“This Project was my training project and the first full fledged project using react.js and building the entire frontend(from scratch) from the wireframes to the working components was pretty challenging but I think I did a good job given the time constraints.Before the APIs were developed I created mock APIs validated through jsonlint and hosted on localhost using json-server and integrated them.

The project was implemented using the principles of atomic structure.

Tech stack used

1. Frontend :Html,CSS,React.js
2. Backend:Spring Boot

People involved

Mentor-Sakshi Pande

Frontend Developer-Shreya Raj Sisodia

Backend Developer-Shubhankar Kotnala

User Flow Diagram for Podcast Platform

User Flow Diagram

Functionality

1)The user has to Sign up with a unique email id after that the user can login to their account.(the token is being saved in the local storage)

a message showing that the upload is successful will show up

2)After logging in the user can create playlists(name should be unique)and add podcast under them.(used react portals for creating the modal)

Enter the details of the playlist you want to create.

Playlist name and description

3)After creating a playlist click on the add button to upload your first podcast.

Playlist created with the add option to add a podcast

4)Upload the Podcast Video file and Thumbnail Image from the local system.Both of them will be uploaded in Firebase.

The user will be redirected to a form upload page

Upload the video file(mp4) and thumbnail(png) from the system.

Click on save to upload the podcast under that playlist

the loader to show that the podcast is uploading will show

Podcast uploaded successfully

5)Now the podcast thumbnail will show up in the Podcast Activity page of the user.

The user can view the podcast now

6)Click on the Podcast to play it.

The user can play and download the podcast

The user can like and comment on the podcast and the views will be counted.

7)The user can search for a podcast from the search bar

The user can search for a podcast in the search bar

Loader before the search results show up

Results loaded

The user can play like and comment on the Podcast

the user can access the account of the creator of the video

For the Analytics section and I created and hosted mock APIs using JSON web server.The Json server helps with setting up a REST API on the localhost.

I used libraries like jspdf and html canvas to download the pdf files