Overview
Chitter is a Twitter clone app built with cutting-edge technologies including ReactJS, TypeScript, and TailwindCSS, featuring a user interface similar to Twitter.
This project is one of the solo challenges during Makers coding bootcamp.
It 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.
Tech stacks
ReactJS, Typescript, TailwindCSS, Cypress, Jest, OpenAi
Task
Given a back-end ExpressJS server with several routes, my task is to design and develop a frontend app to display all data from scratch.
User Stories
User stories were provided by Makers as a starting point to explore how to construct the whole project.
- User should be able to register, log in and log out
- User should be able to create a tweet
- User should be able to like and dislike tweets
- User should be able to see the number of likes for each tweet
Challenge
Test-driven with frontend
Before this project, most of my projects were backend-related, which I could test in the terminal with Jest. I was not sure how to execute the same with the frontend application.
Tight timeline
As this was a weekend challenge, technically only 3 days were given to finish all functionalities. Even though Makers told us it was okay not to implement all of them, I still decided to push myself as much as possible.
Not familiar with Cypress
Jest and RSpec are the only two testing frameworks I had used when I started working on this project. Cypress was a new framework to me, and it took some time to study how it works and its best practices.
Typescript with all packages
I encountered some type conflicts while setting up Jest and Cypress with TypeScript in the same project, as Chai and Mocha use the same syntax for it or test. It took me at least an hour to find a proper solution to this issue.
Approach
Starting with Design
I began by using my most familiar tool, Figma, to settle on the layout, fonts, and colors. This helped me to visualize and organize all the functionality of the app.
Test-driven Development (TDD)
TDD was the essential approach throughout the entire development process. Jest tests, component tests, and end-to-end tests in Cypress were all used in this project.
Custom Hook
To apply the DRY principle in this project, I studied and developed a custom hook for fetching data in React. I learned how to do this by reading the React documentation.
Integrating OpenAI to Improve the App
OpenAI is a powerful tool when it comes to text generation. That's why I integrated the OpenAI API into this app to generate fake comments for each post. The process was really enjoyable.
Result
The project was submitted on time with all functionalities from user stories. 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.
What I've learnt
Build a frontend app with Cypress
I had never used Cypress before this project. After studying the basics and best practices from the Cypress documentation, I am now confident in building a frontend with high test coverage in component tests and end-to-end tests.
Task management with a limited time
While working on this project, I learned the importance of a minimum viable product (MVP). Given a short production time, the best strategy is to differentiate essential functionalities from nice-to-have ones and then build them one by one following priority.
React Custom Hook v.s useEffect
I used to apply useEffect everywhere for data fetching. After reading recommendations from other developers and the React documentation, I decided to move it into a custom hook, which could be called everywhere inside the app. This made me feel the power of abstraction and React hooks. I just love it.
