https://github.com/daveanthonyc/x-clone
🐦 X/Twitter Clone in TypeScript React
https://github.com/daveanthonyc/x-clone
authentication component-testing firebase firebaseaut react typescript vitest
Last synced: about 2 months ago
JSON representation
🐦 X/Twitter Clone in TypeScript React
- Host: GitHub
- URL: https://github.com/daveanthonyc/x-clone
- Owner: daveanthonyc
- Created: 2024-08-03T04:21:26.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-08-11T15:18:51.000Z (8 months ago)
- Last Synced: 2025-01-13T20:44:11.484Z (3 months ago)
- Topics: authentication, component-testing, firebase, firebaseaut, react, typescript, vitest
- Language: TypeScript
- Homepage:
- Size: 47.9 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
X Clone
Rich feature React TypeScript clone of X
- This is a clone of X/Twitter's main application in React/TypeScript. It is just the front end client code and makes use of the database/authentication toolset from Firebase for simplicity of development.
- My focus with this project is to learn a myriad of practical app development, React and testing skills and I will attempt to build it without a tutorial and just seek out documentation for tools being used and also web dev concepts. Any useful findings will be added to this readme document. I can potentially post about my learnings in my blog as well.
# Feature Goals
- Posting
- User interaction (likes, replies, shares, views)
- User Authentication / (maybe use O Auth as well?)
- File uploading / Video sharing
- Paid Premium Subscription (Stripe Integration)
- Account Search
- Infinite Scroll
# Key Learning Goals
- Create reusable components with different variants like in a design system
- Test by conveniently viewing all states of components (Storybook)
- How to handle Global State Management and flow when involving async fetch requests (e.g Auth using Redux/Context)
- Understand Patterns to integrate payment services (Stripe)
- Vitest component testing (experiment with TDD) and mocking services
- Implementation of MVP architecture. (explore use of Custom Hooks/Context Providers for encapsulation of presenter logic?)
- Create testable modules with dependency injection
# Installation
*Clone the Repository*
```bash
git clone [email protected]:daveanthonyc/X-Clone.git
```
*Install dependencies*
```bash
npm install
```
*Run development server*
```bash
npm run dev
```