A full-stack MERN application that allows users to read up on their favorite superheroes and supervillains and make posts about them. Utilizes a React frontend with AJAX API calls to the Superhero 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 gain more information on a super when I navigate to their details page. I also want to be able to favorite my top three supers.
As a user, I want to see all of the posts people are making about super battles in reverse chronological order (so I can see the newest posts firsts).
As a user, I want to be able to create a post about battling supers, prodiving an outcome and details.
As a user, I want to see the full information on a battle post. I also want to be able to like and comment on those posts.
As a user, I want to be able to edit a post after publishing in case I make a mistake.
As a user, I want to be able to see all my favorite supers and battle posts, or the supers and posts of another user, on one page.
As a returning user, I want to be able to login to see my personalized data.
As a new user, I want to be able to sign up to create personalized data.
Dynamic Duel is a MERN stack application. In employs a React frontend that interacts with a third-party Superhero 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 Superhero API I used to gather supers information.
- A public domain file image I used as an image not found for supers without working image links.
- A maginifying glass icon I used in the search bar.
- A Stack overflow resource for using onerror in images I used to set default images when a valid image URL was not provided by the Superhero API.
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
Go to Superhero API and create an access token by logging in through Facebook.
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_API_URL=https://www.superheroapi.com/api.php/<your access token>
REACT_APP_AUTH_URL=http://localhost:<PORT>/auth
REACT_APP_BATTLE_URL=http://localhost:<PORT>/battles
REACT_APP_LIKES_URL=http://localhost:<PORT>/likes
REACT_APP_COMMENTS_URL=http://localhost:<PORT>/comments
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.
Use the searchbar at the top to browse our supers on file. Click their cards to learn more about each super. Login (or sign up) to pick fights, pitting super against super, and favorite your top three supers! Determine the outcome, fill in the battle's details, and post. From there you can browse battles, like them, and post your comments. You even have a personal user pages to view your top three supers and the battles you've created- and the user pages of others too!
Features to be added in further edits:
- Ranking the top three supers on your user page
- Creating a page specifically to edit a user's own favorite supers, utilizing a search funciton and the ability to save results