Skip to content

Web app to fetch artists events data via public API. Managing global state with redux-toolkit. Responsive design with material-ui. Cool animations and transitions

Notifications You must be signed in to change notification settings

okozolin/redux-toolkit-show-info-from-api

Repository files navigation

Small web app to display Artists/Bands info & events”

🎸Try the app ⭐️

Home page preview

Requirenments

Home page:

  • Allow the user to search for an artist (Using ​this​ API. for app_id just use any random number)
  • Upon a good search result:
    • Display artist meta-data: name, image
    • Display a list of events that are related to the artist
    • Display the user’s “favorite” events

Upon selecting an event:

  • Navigate to a new page showing:
    • Event meta data
    • Event venue information
    • Special offers related to event
  • Add to favorites button
  • Display the venue location on a map

Upon selecting - add to favorites:

  • Add this event to the favorites list
  • Persist the favorites section, so that when the user refreshes he will see it again

Styling & UI

  • Styling with Material-ui
  • The app is responsive !

-

Here is a simple mock:

Home page

Home page preview

Events page

Home page preview

Implementation highlights

1. Code

  • Framework: React. Global state management : Redux-toolkit

  • Manage async API calls with redux-toolkit 'createAsyncThunk'

  • Use Data normalization pattern of { ids: [], entities: {}} with redux-toolkit 'createEntityAdapter'

  • Material-ui components composition

    • Read about caveats with inline function as an argument for the component prop here
    • Example: I used react-router-dom 'Navlink' componet as replacing component property with 'Button' , 'ListItem', 'CardActionArea'
  • Application flow is controled by URL. Meaning, you can fetch info by simply typing the correct url. e.g. "localhost:3000/beyonce"

  • Home page preview

  • Performance:

    • Built in selector function memoization with 'createEntityAdapter'
    • Use 'memo' to memoize components when needed
    • When possible, 'store' data is used instead of new fetch in cases where artist has not changed (e.g. back to artist page from event page)

2. Responsive UI

  • Menu buttons change shape when screen get smaller
  • Menu buttons turn to just icons in mobile
  • Search field size and position adjust to the change of screen size
  • Artist image size changes (smaller) in mobile
  • 'Ticket' button is not displayed in mobile
  • Home page preview

3. UI/UX

  • Show badge number of total exiting favorite items
  • Home button
  • Remove favorites button in favorites list
  • Go to event page from favorites list
  • Gradient color buttons style change on hover
  • Display an animated placeholder of artist image before it gets loaded
  • Home page preview

4. Animations

  • Hover my name...🤩
  • Beating heart as favorite, in event page
  • Display an animated placeholder of artist image before it gets loaded
  • Home page preview

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

About

Web app to fetch artists events data via public API. Managing global state with redux-toolkit. Responsive design with material-ui. Cool animations and transitions

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published