ksalpern/jsninjas-superhero-frontend

Fullstack Superhero App, developed with React and Material-UI, featuring an intuitive user interface, seamless integration with the backend API, and interactive functionalities for managing superheroes, including adding, editing, and viewing hero details with images.

Superhero fullstack app

The Fullstack Superhero Database App is a powerful web application that allows users to manage a vast collection of superheroes. With user authentication and authorization features, users can create an account, log in, and log out to access exclusive functionalities. Only logged-in users have the privilege to add new heroes and update the heroes they've created. Each hero has its own dedicated page, providing a more detailed description, including their nickname, real name, origin story, superpowers, and catchphrase. Users can easily edit any field of a hero, including uploading images to the database. Powered by Node.js and MongoDB on the backend, and React with Material-UI on the frontend, this fullstack app offers a secure and immersive experience for superhero enthusiasts to manage their superhero database.

Click here to see the app, here to see how it works in my local machine and here to see backend😃

Technologies used:

• React.js

• Redux

• Material UI

• sass

• react-simplemde-editor

• react-hook-form

• react-markdown

• prettier

• react-router-dom

To run frontend locally, please follow these steps:

1. Clone the repository from GitHub.

git clone https://github.com/ksalpern/jsninjas-superhero-frontend

2. Open the axios.js, FullHero.jsx, Home.jsx and AddHero/index.jsx and replace REACT_APP_API_URL with backend link, for example: http://localhost:4444/.

3. Install dependencies.

cd jsninjas-superhero-frontend
yarn

4. Start the server.

yarn start

5. The website is now working, hope you enjoy it 😃