This project is a clone of the Twitter User Interface, built with React and TypeScript.
The React Context API was used to share and manage state across the components without passing props down the tree. A global state was created and the child components were able to consume the data provided in the context such as the selected theme and the tweets' data.
The data used in the project, such as the users and the tweets, are fictional and were created to better exemplify the app's functionality.
- React
- TypeScript
- React Router
- Styled Components
- Web
- Mobile
✔️ Switch between light and dark themes. The selected theme is stored in the local storage and the app will load the preferred theme when the user revisits the page.
✔️ Check the example tweets on the timeline
✔️ Send a new tweet as the example user
✔️ Click on one of the tweets, go to the individual page of the tweet, and check the replies to that tweet
✔️ Send a new reply to any of the tweets on the timeline
To clone and run this project you'll need Node.js and Git installed on your computer. In addition, it is good to have an editor to work with the code like [VSCode] (https://code.visualstudio.com/). Follow the instructions bellow:
# Clone this repository
$ git clone https://github.com/julianachagas/twitter-ui.git
# Go into the repository
$ cd twitter-ui
# Install the dependencies
$ npm install
# Run the app in development mode
$ npm run dev
# Build the app for production to the 'dist' folder
$ npm run build
# Preview the production build locally
$ npm run preview- Layout by Rocketseat
- Phosphor Icons
- @phosphor-icons/react
- Random Users: Generates random user profile pictures
- How to use React Context properly and useContext() with Typescript: great articles that helped me to understand how to implement React Context API with TypeScript to manage the global state
- useMemo inside Context API - React: article on how to use useMemo with the Context API to prevent unnecessary renders in the child components.
