ALEX LAWN

PROJECTS

dark mode Dark Mode
light mode Light Mode
profile-picture

Jammming

A React web application that allows users to search the Spotify library, create a custom playlist, then save it to their Spotify account. It uses my knowledge of React components, passing state, and requests with the Spotify API. I created the whole app, with occasional help from my tutors.

  1. Wrote the HTML and CSS for each component.
  2. Passed the state of a search results parameter through a series of components, to render an array of tracks.
  3. Passed the state of a user's custom playlist title and tracks from the app component to the components that render them.
  4. Created a method for adding a song from the search results track list to the user's custom playlist. Also created a method to remove a song from this playlist.
  5. Created a method which allows users to update their playlist name.
  6. Created a method that saves the playlist to the users Spotify account.
  7. Connected the app search bar to the Spotify search.
  8. Wrote three methods to obtain and use a Spotify users access token, eventually allowing the user to save the new playlist to their Spotify account.

Ravenous

A full front-end web application that updates automatically and allows you to search for restaurants using the Yelp API. I created the whole app, with occasional help from my tutors.

  1. Wrote the HTML and CSS for each component.
    1. Business component simulates a single business
    2. BusinessList component simulates a list of single businesses
    3. SearchBar component is used to search for businesses
    4. App component renders the SearchBar and BusinessList component
  2. Moved business information to the container component (App) and passed information from parent components (App) to child components (BusinessList, Business).
  3. Added visual feedback for the sorting options at the top of the search bar.
  4. Set the state of sorting options and input elements.
  5. Simulated a search query with a “Let's Go” button.
  6. Connected the app to the Yelp API to access real-life restaurant information.
  7. Removed the hard coded business information.

Expresso

The Expresso tool is an internal tool for a hypothetical café. It is a full back-end CRUD API that allows users to create, view, update, and delete menus, menu items, employees and employee timesheets. I built all of the API routing and database logic. I created the tool with occasional help from my tutors.

  1. Created and exported the Express app from a root-level file called server.js
  2. Using the root-level database.sqlite as my API's database, I created database tables for employees, timesheets, menus and menu items.
  3. I gave each database table appropriate properties. For example, the employee table has properties such as id, name, position and wage.
  4. Created all route paths and functionality. For example, the /api/menus route GET request returns a 200 response containing all saved menus on the menus property of the response body.
  5. Used a testing suite to check all essential functionality and edge cases.