Superhero full-stack application

Tesk task for JS Ninjas using ReactTS, Zustand, ExpressJS, MongoDB. Tech interview was about fucking puzzles and simple IQ questions. The most ridiculous tech interview I have ever seen.

Demo

Screenshot Video

What is realized

• Create, edit, delete hero
• Avatar for hero
• Nice modal window using portals to create and edit a hero
• Editing is only available on the current HeroPage
• Heroes sorted by creating date
• Pagination
• See the details of one particular superhero
• Responsive design

What is not realized

• Unit tests

Environment Variables

To run this project, you will need to add the following environment variables to your .env.local file in the main folder

MONGO_URI=mongodb+srv://user:user@cluster0.i0lx2.mongodb.net/js_ninjas_db?retryWrites=true&w=majority&appName=Cluster0

Run Locally

Clone the project

  git clone https://github.com/prmakk/jsninjas_test_task

Go to the project directory

  cd jsninjas_test_task

Install dependencies for the backend

  npm install

Start the server

  npm run dev

Install dependencies for the frontend

  cd ./frontend
  npm install

Start the app

  npm run dev

Tech Stack

Client: React, Typescript, Zustand, React Toaster

Server: Node, Express, MongoDB