A web application that fetches the breaking bad character details along with the quotes avaialble for each character.
| ReactJS + Breaking-Bad-API |
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
First of all, simply clone/download the project to your local machine location.
(NOTE: THE DEMO WON'T WORK AS THE BREAKINGBADAPIS ARE NOT WORKING.) The live demo for the application can be found here: https://breaking-bad-cast-delta.vercel.app/
VSCode
Others: Atom, Sublime or simply choose as per your comfortability and experience.
Scripting: ReactJS
Database: None
Deployment [Optional]: Possibilities: AWS/Firebase/Localhost/Heroku/Netlify [Used here: Heroku - Heroku Download]
If you don't have it installed, go ahead and install it. Refer here to follow the steps: https://www.npmjs.com/get-npm
Download the 'react' and 'react-dom' packages using npm. Also, 'create-react-app' which creates a basic project layout for the application.
>> npm i react
>> npm i react-dom
>> npm i create-react-app -g ('-g' tag installs it globally to be accessed from anywhere)
A step by step series of examples that tell you how to get a development env running.
If you are using VSCode pop up the terminal (Ctrl + `) and make sure you're in the correct folder directory [breaking-bad] (if for some reason you are not, use 'cd + ' to visit the required directory).
npm i(nstall)
'axios': To make HTTP requests to the server's APIs to fetch/save data
'react-js-pagination': To enable pagination (displaying filtered results)
After all the dependencies are installed, then run the command 'npm start'. If the code compiled successfully, the following message will be displayed otherwise there's some problem (read the error, resolve it).
Compiled successfully!
You can now view breaking-bad in the browser.
Local: http://localhost:3000
On Your Network: http://network-ip:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
As mentioned above, heroku is being used to deploy the react web application. Tutorials are available on YouTube, I won't be covering them here.
- Improving the basic layout/project structure of the application
- Further separating the business-presentational logic
- About Page (information about the show itself)
- Adding a sticky navigation, that triggers upon scrolling below the header i.e. using waypoints and JS/jQuery
- ReactJS - JavaScript Library
- VSCode - IDE
- Deploying on Heroku - Cloud Hosting
- Mandeep Singh - Ryuk-hash