Chitter in ReactJS & Typescript

A Scalable ReactJS Twitter Clone with Type-Safety and User-Friendly Design

View Demo · Report Bug · Request Feature

Table of Contents

• Table of Contents
• About The Project
  • Key Features
  • Built With
• Getting Started
  • Prerequisites
  • Installation
  • Running Tests
  • Production Build
• Contributing
• Contact

About The Project

Chitter is a Twitter clone app built with cutting-edge technologies including ReactJS, TypeScript, and TailwindCSS, featuring a user interface similar to Twitter.

The project showcases the effectiveness of TypeScript in building a type-safe, well-tested application. Custom hooks were developed to handle data fetching and form submission, and the app includes comprehensive end-to-end and unit tests using Cypress and Jest. Furthermore, the app integrates OpenAI API to generate random comments for each peep.

Overall, this project represents a significant achievement in my development career, showcasing my expertise in building scalable and maintainable front-end applications using the latest technologies and development practices.

(back to top)

Key Features

• ✅ User registration and login
• ✅ Ability to create, view, and delete peeps (tweets)
• ✅ Ability to like and unlike peeps
• ✅ Custom hooks for data fetching and form submission
• ✅ User interface based on the real Twitter for a familiar experience
• ✅ Integration of OpenAI API for generating random comments for each peep.

(back to top)

Built With

This project was built with the following tools:

• 
• 
• 
• 
• 
• 

(back to top)

Getting Started

This section shows you how to set up this project locally. First, get a local copy up and running follow these simple steps.

Prerequisites

You have to make sure that npm and node have been installed in your local machine before running the project. If not, follow the steps below.

• npm

  npm install npm@latest -g
  npm -v

• nvm & node

  # visit https://github.com/nvm-sh/nvm on how to install nvm
  nvm install node
  node -v

---

Installation

1. Clone the repo

   git clone https://github.com/terryhycheng/frontend-api-challenge.git
   cd frontend-api-challenge

2. Install NPM packages

   npm install
   
   # OR
   
   yarn

3. Set Up .env.local In order to use OpenAI, please add your API key to the file.

   VITE_OPENAI_API_KEY=

(back to top)

---

Running Tests

Before compiling the codes into production-ready Javascript, you should run the tests and make sure every line can be run without causing any errors.

1. Run Jest tests

   npm run test
   
   # OR
   
   yarn test

2. Run Cypress tests

   Please make sure a dev server is serving the front-end before running the following commands.

   # run cypress tests without GUI
   cypress run
   
   
   # with GUI
   npm run cypress
   
   # OR
   
   yarn cypress

Then, test coverage reports will be automatically generated in the folder coverage. You can modify the setting in package.json to remove the command --coverage.

(back to top)

---

Production Build

This project was built with Typescript. You can use Vite command to covert all TS codes into JS before passing to deployment.

1. Build with Typescript

   npm run build
   
   # OR
   
   yarn build

All production-ready Javascript codes will be put in the folder dist.

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

Contact

Terry Cheng - @terryhycheng - [email protected]

Project Link: https://github.com/terryhycheng/frontend-api-challenge

(back to top)