SEI Project 2 - Weekend Away

For my second project with General Assembly, I built a web application using ReactJS and a third party public API of my choice.

Weekend Away is a website that allows the user to browse a list of UK restaurants by city. Providing details of the restaurant, including name and address. A user can also add restaurants to the list.

Getting Started/Code Installation

To access and run the code for this project, follow these steps:

• Download or clone the project repository from GitHub. You can do this by clicking on the green "Code" button and selecting "Download ZIP" to download a zipped version of the code, or by copying the repository URL and running git clone in your terminal.
• Once you have the code downloaded or cloned, open the project folder in your code editor of choice.
• Open the index.html file in your web browser to view the project.

Timeframe

5 days - solo project

Technologies Used

• React
• Fetch
• Bootstrap
• CSS
• Postman
• Wyre Data API

Brief

Select a Project Idea of your own. But the user must be able to:

• Add a new item to a list.
• Mark the item as complete/favourite/(watch, read, listen) later/flag/etc.
• Edit an item from a list.
• Remove an item from a list.
• Clear/delete all items.
• Clear/delete only marked items.
• Fetch data from at least one 3rd party API using Axios or fetch.
• Make frequent Git commits with descriptive messages, explaining your commit.

Planning

Wireframe

I signed up for a free 30-day trial for the Balsamiq wireframing tool. I wanted to create a user-friendly page with a simple search box at the top and an area underneath to list the results. I also planned to use icons to allow the user to save restaurants into their favourites page.

API

I searched the web looking for a clean, easy-to-use api, one that would be rich with data and reliable. Wyre Data API appeared to fit the bill, with hundreds of UK restaurants listed.

Pseudocode

To structure my React app, I created a notes.txt file where I planned out the components, props, and state.

• The main container component is App.js, which includes the Search component and the ListContainer component for displaying items.
• The ListContainer component renders the ListItems components based on the props passed down from the App.js level.
• The App.js level also manages the search functionality by passing down the search value as state to the ListContainer component, which then filters the list of restaurants accordingly.
• Finally, the Search component allows the user to input their search query, which is also managed at the App.js level.

Build Process

• I began by creating a .env file for the API key and adding that to git ignore.
• I then created a components folder based on my planning and pseudocoding.

I styled the search form with React Bootstrap, which prompted the user to enter the city they are looking to search:

Using the city that the user has typed in, the fetch process is then run to get the data from the API:

Again, using React Bootstrap, I then created a table for the mapped data output:

I also created functionality to allow the user to add a restaurant to the list:

Challenges

Within the timeframe, I could not fix the remove button for the restaurants returned from the API. Each restaurant has an ID, and I included the id in the functionality, I was unable to determine why the id was not matching up with the restaurant. I plan to revisit and do more testing, possibly through Postman and researching other test methods, in order to get to the root of the issue.

Wins

• I am proud to have met the MVP for my first React project.
• Using Postman helped me to better understand the structure of the API and how to properly manipulate the data to achieve my desired functionality.
• Gaining experience with styling and layout design using Bootstrap.
• The creation of the table was incredibly satisfying to build as it was one of the bigger challenges that I faced when rendering the API information into a clear and concise table format.

Key Learnings

• I would like to practise with other API's, particularly ones that return more information to work with, for example, images.
• Using Postman to test API requests to ensure that the data was properly retrieved before integrating it into my React app.
• This was my first time working with React and understanding the difference between props and state and how to use them appropriately in React components.
• I gained experience with state management and learned how to update state using the setState() method.
• This was also my first time working with Bootstrap. The Bootstrap documentation helped to guide me on the use of Bootstrap classes for styling the elements and components.
• I also learned how to incorporate Bootstrap components into React components.

Bugs

• At present, the loading message only appears at the start, I will revisit so that the message appears while waiting for search results.
• I will add functionality to deactivate the 'Add Restaurant' button until after the user has completed their search.
• The user input should clear after they have pressed search.
• As mentioned in challenges, I would like to remove individual restaurants from the API search, when pressed it removes them all because of the restaurant.id issue.

Future Updates

• At present, I have added a favourite button next to listed restaurants. I would like to add functionality so that it updates the ‘favourite list’ at the top of the page.
• When the user clicks on their ‘favourite list’ I would like for them to be able to view the list of their favourite restaurants.
• I would also like to add Bootstraps image carousel for a more visually appealing user interface.