Hero Battles

I love super heroes. I felt a project like this could brighten up my github portfolio 😉

This is a fullstack app built with Node, Express, GraphQL, PostgreSQL, React and Redux. It also features separate CI/CD pipelines for the back end and front end.

I used the Superhero API to fetch details about super heroes.

Link

⚠️ The api I used has been discontinued hence the project can't fetch any data now.

Working project link: Superhero Battles

Where's Everything Hosted?

1. Graphql server: Continuously deployed on a Digital Ocean server using Github Actions.
2. React app: Continuously deployed on Netlify.
3. PostgreSQL: Hosted at ElephantSQL.

Technologies & Libraries Used

Language: Typescript
Package manager: Yarn

Back End

1. Node.js
2. Expres.js
3. GraphQL
4. Apollo Server
5. PostgreSQL
6. TypeGraphQL
7. TypeORM
8. Axios
9. Nginx (reverse proxy)
10. Let's Encrypt (for SSL certificate)

Front End

1. React.js
2. Apollo Client
3. Redux
4. Bootstrap
5. React Router Dom
6. Formik
7. Yup

CI/CD

1. Github Actions
2. Netlify Automatic GitHub Depolyment
3. PM2

Features

1. Responsive Application: The app looks good on all devices. Made possible with the help of bootstrap.
2. Signup/Login: Authentication done with json web tokens.
3. Search: Search for any superhero using the search bar on the homepage.
4. View Details Of a Hero: View the complete details of a hero.
5. Add Hero To Your Collection: If you like a hero, you can add it to your collection.
6. View Account Details & Colelction: You can view your account details and the heroes in your collection.
7. Organize Battles Between Heroes: You can make different heroes battle against each other [Coming Soon]

App Screenshots

Homepage:

Homepage (scrolled down):

Super Hero Details Page:

Login Page: