- Link to my app's UI overview: App's UI Overview👈
- Link to my app's code overview: App's Code Overview👈
A static web application that displays Tedooo's feed page.
This application was part of a home assignment for the Front-End position at Tedooo.
-
Front-end :
- Redux RTK & Query - For state and data-fetching management.
- React Router - For routes management.
- Material UI - for UI components
- date-ns- For dates manipulation.
- react-infinite-scroller - For feed infinite scrolling.
- react-intersection-observer - For tracking the posts the user hasn't watched yet.
- msw - For mocking routes' api in order to test React app.
- jsdom-testing-mocks - For mocking broswer function in order to test React app.
-
Clone the repo
git clone git@github.com:rom-orlovich/tedooo-assignment.git -
Install all the dependencies
npm run ci -
Run Client
npm run start -
Go to http://localhost:3000 and have fun!
- Fetching Posts From Tedooo's API- Fetching and displaying posts from Tedooo's API.
- Infinite Scrolling:
- Scroll down until there are no more posts to display.
- For each scroll event, six new posts will show.
- Autocomplete Search Input:
- Suggesting a list of post's title names from Tedooo's API.
- The user can search posts by title and display the results on the feed.
- Posts Memorization:
- Change the URL's queries parameters if the user has already watched the post.
- Save the indicator if the user watched the post in the local storage.
- When the user will watch the post again, the URL won't change.
- Implements CRUD Actions of Posts, Comments, Likes - Create/Read/Update/Delete posts, comments, likes.
- React App Optimizition:
- Minimizing Material UI bundling size.
- Optimizing posts' images loading.
- Implementing components' lazy loading.
- Cypress Tests - Implementing End to End tests using Cypress.
- Improving App's Style.
