Getting Started with Marvel-Soccer-Planner

This project was bootstrapped with Create-React-App. It's a simple single page web app allow user to view Marvel characters and select them for a 6-aside soccer team. User has options to share their team lineup to social media.

Run Instruction

To preview the web app, please visit: https://thanhtdiep.github.io/marvel-soccer-team-planner/ .

In the project directory, you should run:

npm install

This should install all required dependencies to run the app.

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

User Guide

Once view it in the browser, you can start:

1. Search for a Marvel characters by name via the search bar on the left
2. Click on one of the results
3. View selected character's information on the right
4. You can choose the selected character in a role in the soccer team, click the "Add" button once done.
5. Keep track of your team lineup through the visual feedbacks, you also have an option to remove added characters of a role by clicking "Remove".
6. Once you've added 6 characters for your team, you can share it with friends on social media via the buttons at the bottom of the page.

NOTE

Please make sure your Node.JS version is 12+
.env file was intended to be pushed for review purposes.