{"id":15593154,"url":"https://github.com/onjoseph/javascriptcapstone","last_synced_at":"2026-05-08T03:02:29.270Z","repository":{"id":39968934,"uuid":"492995070","full_name":"ONJoseph/JavaScriptCapstone","owner":"ONJoseph","description":"JavaScript Capstone API Based Project using an external API-TVmaze API for displaying and interacting with movie items from the data base.","archived":false,"fork":false,"pushed_at":"2022-05-20T14:52:23.000Z","size":1293,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"dev","last_synced_at":"2025-02-04T08:44:13.390Z","etag":null,"topics":["css3","html5","javascript","jest-tests","webpack"],"latest_commit_sha":null,"homepage":"https://github.com/ONJoseph/JavaScriptCapstone/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ONJoseph.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-05-16T20:48:39.000Z","updated_at":"2022-05-19T22:08:00.000Z","dependencies_parsed_at":"2022-08-25T08:51:20.754Z","dependency_job_id":null,"html_url":"https://github.com/ONJoseph/JavaScriptCapstone","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ONJoseph%2FJavaScriptCapstone","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ONJoseph%2FJavaScriptCapstone/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ONJoseph%2FJavaScriptCapstone/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ONJoseph%2FJavaScriptCapstone/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ONJoseph","download_url":"https://codeload.github.com/ONJoseph/JavaScriptCapstone/tar.gz/refs/heads/dev","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246168110,"owners_count":20734390,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css3","html5","javascript","jest-tests","webpack"],"created_at":"2024-10-03T00:04:52.258Z","updated_at":"2026-05-08T03:02:24.215Z","avatar_url":"https://github.com/ONJoseph.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![](https://img.shields.io/badge/Microverse-blueviolet)\n\n# Joseph Ogbole \u0026 Aldo Colombo Javascript capstone project\n\n\u003e API-based webapp from Module 2 at Microverse\n\n## Wireframe requirements\n\n### The Home Page low fidelity\n![Home.png](./Home.png)\n\n### The low fidelity for comment pop up page\n![](./Comments.png)\n\n## Actual screenshot\n![Screenshot](./moviezScreenshot.png)\n\n## Video presentation\n[Video link](https://drive.google.com/file/d/1D-y1Rhc4E0yFH7o8dmgjGcvOGnMayFCi/view)\n\n## Description\nJavaScript Capstone API Based Project using an external API-TVmaze API for displaying and interacting with movie items from the data base. \n\n## Requirements\n\n### APIs\n- First, you need to find an API so you can base the development of the webapp around it. The API should allow you to:\n  - Get a list of items with a unique item id (or generate the unique id).\n  - For a given item, get detailed information about it.\n- You will use our [Involvement API](https://www.notion.so/Involvement-API-869e60b5ad104603aa6db59e08150270) to record the different user interactions (likes, comments and reservations).\n\n### Interfaces\n- You should build these interfaces:\n  - The home page.\n  - The comments popup.\n- You should follow the layout of the wireframes provided. You should personalize the rest of the design including colors, typographies, spacings, etc.\n- Home page\n  - When the page loads, the webapp retrieves data from:\n    - The selected API and shows the list of items on screen.\n    - The Involvement API to show the item likes.\n  - Remember that your page should make only 2 requests:\n    - One to the base API.\n    - And one to the Involvement API.\n  - When the user clicks on the Like button of an item, the interaction is recorded in the Involvement API and the screen is updated.\n  - When the user clicks on the \"Comments\" button, the Comments popup appears.\n  - Home page header and navigation similar to the given mockup.\n  - Home page footer similar to the given mockup.\n- Comments popup\n  - When the popup loads, the webapp retrieves data from:\n    - The selected API and shows details about the selected item.\n    - The Involvement API to show the item comments.\n  - When the user clicks on the \"Comment\" button, the data is recorded in the Involvement API and the screen is updated.\n\n### Counters\nCounters We have counters in all the interfaces that show:\n- The number of items (home).\n- The number of comments (comments popup).\n\n### Technical set up\n- Set up the repository on GitHub and use Gitflow.\n- Set up webpack.\n- Set up a JavaScript testing library (Jest).\n\n## Instructions:\n\n ### Cloning the repo to your local system (if you already have git, installed in your system)\n\n 1) Copy this Link `https://github.com/ONJoseph/JavaScriptCapstone.git`\n 2) Open your terminal or command line\n 3) Run the command: `git clone https://github.com/ONJoseph/JavaScriptCapstone.git`\n 4) Open the folder with your code editor: `cd JavaScriptCapstone`\n 5) Now You can edit the code and check the changes in the browser using Live Server\n\n## Built With\n\n- Major languages: HTML, CSS, JS\n- Frameworks: none\n- Technologies used: Git, webpack, Jest\n\n## Live Demo\n\n- [Live demo link]()\n\n## Getting Started\n\nTo get a local copy up and running follow these simple example steps.\n\n### Prerequisites\n\n- Internet connection and browser\n- A text editor (preferably Visual Studio Code)\n- Browser\n\n### Setup\n\n- For detail description of how to get started with webpack, please, look at: [webpack](https://webpack.js.org/guides/getting-started/)\n\n### Install\n\n- [Git](https://git-scm.com/downloads)\n- [Node](https://nodejs.org/en/download/)\n\n### Usage\n\n- Clone the repository using `git clone https://github.com/ONJoseph/JavaScriptCapstone.git`\n- Change directory into the project folder: `cd JavaScriptCapstone`\n- Run `npm install`\n- Run `npm start`\n- A new browser will open automatically with application loaded\n\n### Run tests\n\n- Test the number of movies loaded with Jest\n- Test the number of comments with Jest\n\n### Deployment\n\n- All the files necessary for deployment are in the /dist folder\n\n## Authors\n\n👤 **Joseph Ogbole**\n\n- GitHub: [@ONJoseph](https://github.com/ONJoseph)\n- Twitter: [@ONJCodes](https://twitter.com/ONJCodes)\n- LinkedIn: [LinkedIn](https://www.linkedin.com/in/o-n-joseph-ba8425147/)\n\n👤 **Aldo Colombo**\n\n- GitHub: [@acolombo1](https://github.com/acolombo1)\n- Twitter: [@aldocolombo](https://twitter.com/aldocolombo)\n- LinkedIn: [Aldo Colombo](https://www.linkedin.com/in/aldo-colombo-2156009)\n\n\n## 🤝 Contributing\n\nContributions, issues, and feature requests are welcome!\n\nFeel free to check the [issues page](https://github.com/ONJoseph/JavaScriptCapstone/issues).\n\n## Show your support\n\nGive a ⭐️ if you like this project!\n\n## Acknowledgments\n\n- TV Amaze API to retrieve shows data\n  - More information [Here](https://www.tvmaze.com/api)\n- Involvement API to store and retireve likes and comments\n  - More information [Here](https://www.notion.so/Involvement-API-869e60b5ad104603aa6db59e08150270)\n\n\n## 📝 License\n\nThis project is [MIT](./license.md) licensed.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fonjoseph%2Fjavascriptcapstone","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fonjoseph%2Fjavascriptcapstone","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fonjoseph%2Fjavascriptcapstone/lists"}