train-ticket booking application

What I want to do in this app is simple but informative. This website is based on mobile-first design so the font-size:pencil2: will change according to different screen width. Users can still use PC brower but some functions will be not working well. However, I am happy with that because I focus on user experiense:ghost:.
👉 https://main.d22uf4v566qg8b.amplifyapp.com/

About this app

This app is based on React, Redux, React-redux, redux-thunk, and of course, some third libraries like classnames. Please have a look the home page 😜

Fetch Mock Data

This app is using mock data(sadly stored under Public file:disappointed_relieved:), so the app is showing the same data in some places:neutral_face:. However, the app have to use Fetch api to get different data and present to the users:smirk:.

What I am happy with

1. web optimisation

use useCallback, useMemo and memo to prevent unnecessary renders, and proptypes to define the type of props.

2. the citySelector component

Navigate to cities by clicking the alphabet list at the right hand side, largely enhances user experience. This can be easily done by using data attributes in each city section.

3. the dateSelector component

It always show the current month and next following two months and highlight the weekends. You can find that the eariler date are in grey color that means user couldn't select it.
There is no third party libraries in this section, feel free to have the origin code:sunglasses:.
👉https://github.com/garypotato/ticket-booking-app/tree/main/src/Home/DateSelector

4. the Filters component

Users can sort the ticket by departure, travelling time and ticket type. The filters can help user to book the ticket they need easily.
I also created a time slider that users can choose the departure and arrive time they want. All the filters all be stored in Redux.
There is no third party libraries in this section, feel free to have the origin code:sunglasses:.
👉https://github.com/garypotato/ticket-booking-app/tree/main/src/Query/Bottom/BottomModal/Slider

5. timetable for each train

The timetable shows all the stops while highlight the departure stop and destination.
There is no third party libraries in this section, feel free to have the origin code:sunglasses:.
👉https://github.com/garypotato/ticket-booking-app/tree/main/src/Ticket/Schedule

6. Ticket booking

Child cannot book a ticket without adult's company. Users can also choose the seat when booking.

7. React Custom hooks

When user selecting the ticket, they can always change the date.

What needs to improve

RESTFUL APIs

Because of the mock data, the RESTFUL APIs will be always the same that it's impossible in real-world websites.

Debounce

There is no debounce applied in search input