This repository is about building a web application based on an external API.

Overview

Capstone - Project-2 --- API Based Webapp

This is a group project of three people Muhammad Ashraf, Abraha and Luca.

This project is about about building your own web application based on an external API. We will select an API that provides data about a topic that we liked and then build the webapp around it.

Built With

  • HTML
  • CSS
  • JavaScript
  • webpack
  • Linters
  • API Consumption
  • Kanban Board

Getting Started

To get a local copy up and running follow these simple example steps:

  • Run "npm start" command at terminal to browse the page.

Loom Video Link for a brief intro of the app

Prerequisites

  • Web Browser to browse and following tools to debug and make changes (if any): IDE eg (Atom/Visual studio code) Set-up linter(HTML and CSS) webpack

Live Demo

Click here for live demo of the webpage

Setup

Clone the github repository and set up linters and webpack: $ git clone https://github.com/for-ashraf/Capstone-Project-2---API-based-webapp.git $ cd apstone-Project-2---API-based-webapp $ npm i $ npm start

$ npm test # for testing

Authors

👤 Muhammad Ashraf, Abraha Kahsay and Luca Benavente

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

Show your support

Give a ⭐️ if you like this project!

Acknowledgments

  • Hat tip to anyone whose code was used
  • Inspiration
  • code reviewers, morning session and standup team
  • etc

📝 License

This project is MIT licensed.

Comments
  • Setup - Capstone Project - API Based webapp

    Setup - Capstone Project - API Based webapp

    Project Link

    https://github.com/for-ashraf/Capstone-Project-2---API-based-webapp/projects/2

    Team Members

    This is a group project of three people Muhammad Ashraf, Abraha and Luca.

    opened by for-ashraf 2
  • JavaScript capstone project - Your API-based webapp

    JavaScript capstone project - Your API-based webapp

    In this PR, I have implemented the following: - Used JavaScript to make websites dynamic and build basic single page apps. - Used ES6 syntax. - Used ES6 modules. - Used callbacks and promises. - Used webpack. - Applied JavaScript best practices and language style guides in code. - Used AAA pattern for unit tests. - Write units tests for a JavaScript app. - Followed Gitflow. - Solved simple git conflicts. - Send and receive data from an API. - Used API documentation. - Used JSON. - Make JavaScript code synchronous. - Perform a code review for a team member.

    Implementation

     - A home page showing a list of items that you can "like."
     - A popup window with more data about an item that you can use to comment on it or reserve it for a period of time.
    
    opened by for-ashraf 0
  • Add count reservations functionality

    Add count reservations functionality

    Project description

    • Even if the API gives you the number of reservations you will create a specific function to calculate it.
    • Make sure that the correct number is displayed on the Reservations pop up.
    opened by AbrahaKahsay 0
  • Add reservation controller

    Add reservation controller

    Project description

    • Create a reservations popup only with the top section (displaying details of the selected item)
    • When the popup loads, the webapp retrieves data from the selected API and shows details about the selected item.
    • Add event to button prepared by your teammate that will open your popup. You need to communicate with your team member to make sure that you do not block each other (most likely the easiest solution is to merge the list of items feature to the dev branch before you try to add that event).
    opened by AbrahaKahsay 0
  • FInd an external api for implementation

    FInd an external api for implementation

    Project description

    Find an API to 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. choose an APIs that doesn't need authentication. if you select an API that requires authentication, you should implement it on your own. Also, if you select an API that provides image resources your webapp will be more visual.
    opened by AbrahaKahsay 0
  • 13 4pt display reservations pop up with selected items details student c

    13 4pt display reservations pop up with selected items details student c

    Project description

    • Create a reservations popup only with the top section (displaying details of the selected item)
    • When the popup loads, the webapp retrieves data from the selected API and shows details about the selected item.
    • Add event to button prepared by your teammate that will open your popup. You need to communicate with your team member to make sure that you do not block each other (most likely the easiest solution is to merge the list of items feature to the dev branch before you try to add that event).
    opened by AbrahaKahsay 0
  • [3pt] - Add comments counter - Student B #5

    [3pt] - Add comments counter - Student B #5

    The following functionalities are incorporated:

    • Functionality to display the counter has been incorporated
    • Even if the API gives the number of comments it will create a specific function to calculate it.
    • The correct number is displayed on the Comments pop-up.
    opened by for-ashraf 0
  • [3pt] - Display comments for a given item on the Comments pop-up - Student B #11

    [3pt] - Display comments for a given item on the Comments pop-up - Student B #11

    I have implemented the following functionalities:

    • When the popup loads, the webapp retrieves data from the [Involvement API] to show the item comments.
    • This task does not include the counter of the comments.
    opened by for-ashraf 0
  • Update Item Counter

    Update Item Counter

    Project Updates :green_circle:

    Even if the API gives you the number of items, you will create a specific function to calculate it.

    Make sure that the correct number is displayed on the Homepgae.

    opened by lucabenaventew 0
  • Display number of likes for each Item

    Display number of likes for each Item

    Project Updates

    When the page loads, the webapp the Involvement API to show the item likes and combines them with the data from the base API.

    Remember that your page should make only 2 requests:

    • one to the base API
    • and one to the Involvement API.

    This task does not include displaying the likes button (heart icon on the wireframe) for each item.

    opened by lucabenaventew 0
  • 8 4pt create feature add new comment student b

    8 4pt create feature add new comment student b

    Implemented the following:

    • the "add new comment" form on the Comments pop up according to the wireframe.
    • When the user clicks on the "Comment" button, the data is recorded in the Involvement API and the screen is updated.
    opened by for-ashraf 0
Owner
Muhammad Ashraf
I am a Full-Stack Developer. I am an expert in PHP and its frameworks. Currently, I am available to hire.
Muhammad Ashraf
This project is a Web application based on an external API. The API provides data about music (including artists, albums, etc) that users can access on-demand. This project was built with ES6, HTML and CSS and it is a SPA.

Capstone M2: Music App This project is a Web application based on the music API Napster built with ES6, HTML and CSS and it is a SPA. This API provide

Karla Delgado 12 Aug 29, 2022
TV Shows Web App - A web application based on an external API which contains information about TV shows

TV Shows Web App - A web application based on an external API which contains information about TV shows. th web app let you like the shows that you like the most and comment what you think about them making use of an involvement API to save this interaction information.

Williams Colmenares 14 Dec 17, 2022
TV Shows Web App - A web application based on an external API which contains information about TV shows

TV Shows Web App - A web application based on an external API which contains information about TV shows. th web app let you like the shows that you like the most and comment what you think about them making use of an involvement API to save this interaction information.

Williams Colmenares 14 Dec 17, 2022
The Meal DB web application displays a list of meals that provided by an external API.

The Meal DB The Meal DB web application displays a list of meals that provided by an external API. The users can like a meal, leave some comments or m

Behnam Aghaali 5 Mar 12, 2022
ScrapedDuck routinely scrapes LeekDuck.com and pushes the found data to a branch on this repository, for use by other external applications.

ScrapedDuck ScrapedDuck routinely scrapes LeekDuck.com (with permission) and pushes the found data to a branch on this repository, for use by other ex

Anthony 19 Dec 19, 2022
This application provides the CDK project and a frontend that allows you to build a serverless chat application based on API Gateway's WebSocket-based API feature.

Serverless chat application using ApiGateway Websockets This project lets you provision a ready-to-use fully serverless real-time chat application usi

AWS Samples 60 Jan 3, 2023
The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is preserved thanks to the external Leaderboard API service. Build with Html, CSS, JS, API, and Webpack.

The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is preserved thanks to the external Leaderboard API service. Build with Html, CSS, JS, API, and Webpack.

Kyrillos Hany 9 Mar 11, 2022
Identity APIs to used to generate DID documents for entities based on external identifiers.

Identity API This API is used to generate and decentralized identity documents for all entities that are stored in a registry. These documents contain

Verifiable Presentation Generation 5 Nov 24, 2022
This project is about building a web application to show a weather forecast using weather API.

Weather App Web application to show the current and upcoming week weather forecast. Want to see live preview » ✧ View Demo ✧ Report Bug ✧ Getting Star

Mohit Sehrawat 10 Dec 25, 2022
This project is about building a web application to translate languages using language translator API.

Language Translator App A web application to translate multiple languages Want to see live preview » ✧ View Demo ✧ Report Bug ✧ Getting Started ✧ Inst

Mohit Sehrawat 15 Dec 19, 2022
The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is preserved thanks to the external Leaderboard API service.

Leaderboard The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is preserved tha

Jihane Haddad 5 Feb 10, 2022
The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is preserved thanks to the external API.

Leaderboard The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is preserved tha

null 5 Mar 5, 2022
The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is preserved thanks to the external Leaderboard API service.

Leaderboard The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is preserved tha

Regiss Mukubiza 2 Apr 8, 2022
This website displays scores submitted by different players. It also allows you to submit your score. All data is preserved thanks to the external Leaderboard API service. Built with Webpack and ES6

Leaderboard This website displays scores submitted by different players. It also allows you to submit your score. All data is preserved thanks to the

Sanja Mandic 9 Sep 30, 2022
The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is preserved thanks to the external Leaderboard API service.

Leaderboard- DESCRIPTION The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is

Andres Garzon 2 Jun 16, 2022
Using Webpack and external API, this website saves and shows players' scores and allows the submission of new scores.

Microverse Students Leaderboard Microverse Students Leaderboard project that displays scores submitted by different students. All data is preserved in

Romina Patiño 5 Aug 19, 2022
Yassir Assignment AIR Quality (integration external API)

A progressive Node.js framework for building efficient and scalable server-side applications. Description Nest framework TypeScript starter repository

Imad  Mansour 5 Oct 25, 2022