A full-stack MERN application that allows users to read up on their favorite tv shows and review them! Utilizes a React frontend with a Redux library, making Axios API calls to the TVMaze API, and an Express.js and Node.js backend interacting with a MongoDB database structured by Mongoose schemas. Built by Joe Gilberto.
Not currently deployed.
As a user, I want to land on an informational home page when I visit the application.
As a user, I want to be able to see all recent reviews and get suggested new shows to review.
As a user, I want to be able to read a review when I navigate to its details page. If I'm the owner, I want to be able to edit or delete a review.
As a user, I want to be able to edit a review if I'm the owner.
As a user, I want to be able to read more about a show when I navigate to its details page, all its reviews, its average score, and the option to review it.
As a user, I want to be able to review a show.
As a user, I want to be able to login or register for more utlities and personalized data.
As a user, I want to be able to view a profile, mine or others, and see that user's favorite shows and reviews.
Rabbt Ears is a MERN stack application. In employs a React frontend with a Redux library that interacts with a third-party TVMaze API and a Node.js backend with a Express.js framework. The backend interacts with a MongoDB database structured by Mongoose schemas.
Below are specific relevant resources I referenced while building this application.
- The TVMaze API I used to gather television show information.
- A public domain pencil icon I used as an edit icon.
- A public domain trash icon I used as a delete icon.
- A public domain bookmark icon I used as a favorite icon.
- A public domain website icon I used as a website icon.
- A public domain checkmark icon I used as a finished icon.
_-_The_Noun_Project.svg){kind=link}
_-_The_Noun_Project.svg){kind=link}
The following instructions were used through macOS with a silicone M1 chip.
To deploy locally, fork and clone this repo. Then, using the terminal, navigate into the backend directory.
Install backend dependencies by running:
npm i
Then, create a MongoDB database and retrieve your connection string through the drivers option.
Still in the backend directory, create an env file:
touch .env
Within that .env file, add that connection string to a DATABASE_URI vairable, a PORT variable with a port number for your backend to run on and for your frontend to connect to, and a JWT_SECRET vairable of your choosing:
DATABASE_URI='<connection string>
PORT=<a number, typically 4000>
JWT_SECRET='<your secret>'
For the final step of your backend set up, spin up the server with the following command:
nodemon
For the first step of your frontend set up, navigate into your frontend directory via your terminal and install your dependencies.
npm i
Next, create your environmental variables:
touch .env.local
Then, add your database environmental variables to interact with your backend (running on localhost at the PORT defined in your backend .env):
REACT_APP_REVIEWS_API_URL=<PORT>/reviews/
REACT_APP_AUTH_API_URL=<PORT>/auth/
REACT_APP_TVMAZE_API_URL=https://api.tvmaze.com/shows/
REACT_APP_TVMAZE_SEARCH_URL=https://api.tvmaze.com/search/shows?q=
Finally, while still in your frontend directory, spin up your front server:
npm start
Now, you can go to localhost:3000 in your browser (Google Chrome is reccommended for best performance) and browse the application.
Land on our colorful homepage and login or dive right into our feed. From there, you can click on exisiting reviews or look into some suggested shows. Use the searchbar at the top to browse a wide range of television shows. Login (or sign up) to start sharing your own opinions! You even have a personal user pages to view your favorite shows, recent reviews, and Rabbt Ears reviewer status!
Features to be added in further edits:
- Adding comments for reviews
- Adding a want to watch list for users