API-based webapp from Module 2 at Microverse
The JavaScript capstone project is about building your own web application based on an external API. You will select an API that provides data about a topic that you like and then build the webapp around it.
- First, you need to find an API so you can base the development of the webapp around it. The API should allow you to:
- Get a list of items with a unique item id (or generate the unique id).
- For a given item, get detailed information about it.
- You will use our Involvement API to record the different user interactions (likes, comments and reservations).
- You should build these interfaces:
- The home page.
- The comments popup.
- You should follow the layout of the wireframes provided. You should personalize the rest of the design including colors, typographies, spacings, etc.
- Home page
- When the page loads, the webapp retrieves data from:
- The selected API and shows the list of items on screen.
- The Involvement API to show the item likes.
- Remember that your page should make only 2 requests:
- One to the base API.
- And one to the Involvement API.
- When the user clicks on the Like button of an item, the interaction is recorded in the Involvement API and the screen is updated.
- When the user clicks on the "Comments" button, the Comments popup appears.
- Home page header and navigation similar to the given mockup.
- Home page footer similar to the given mockup.
- When the page loads, the webapp retrieves data from:
- Comments popup
- When the popup loads, the webapp retrieves data from:
- The selected API and shows details about the selected item.
- The Involvement API to show the item comments.
- When the user clicks on the "Comment" button, the data is recorded in the Involvement API and the screen is updated.
- When the popup loads, the webapp retrieves data from:
Counters We have counters in all the interfaces that show:
- The number of items (home).
- The number of comments (comments popup).
- Set up the repository on GitHub and use Gitflow.
- Set up webpack.
- Set up a JavaScript testing library (Jest).
- Copy this Link
https://github.com/Hombre2014/JS_Capstone_project.git
- Open your terminal or command line
- Run the command:
git clone https://github.com/Hombre2014/JS_Capstone_project.git
- Open the folder with your code editor:
cd JS_Capstone_project
- Now You can edit the code and check the changes in the browser using Live Server
- Major languages: HTML, CSS, JS
- Frameworks: none
- Technologies used: Git, webpack, Jest
To get a local copy up and running follow these simple example steps.
- Internet connection and browser
- A text editor (preferably Visual Studio Code)
- Browser
- For detail description of how to get started with webpack, please, look at: webpack
- Clone the repository using
git clone https://github.com/Hombre2014/JS_Capstone_project.git
- Change directory into the project folder:
cd JS_Capstone_project
- Run
npm install
- Run
npm start
- A new browser will open automatically with application loaded
- Test the number of movies loaded with Jest
- Test the number of comments with Jest
- All the files necessary for deployment are in the /dist folder
👤 Yuriy Chamkoriyski
- GitHub: @Hombre2014
- Twitter: @Chamkoriyski
- LinkedIn: axebit
👤 Bonke Gcobo
- GitHub: @BonkeGcobo
- Twitter: @bonkegcobo
- LinkedIn: Bonke Gcobo
Contributions, issues, and feature requests are welcome!
Feel free to check the issues page.
Give a ⭐️ if you like this project!
This project is MIT licensed.