https://github.com/bazzomir/iwconnect-twitter
Twitter clone built with React & TypeScript during IWconnect’s React Mentorship Program (2022). Includes Redux, Context API, dark/light theme, posts API, and avatar image integration.
https://github.com/bazzomir/iwconnect-twitter
context-api dark-mode jsonplaceholder-api pravatar-api react react-redux redux redux-thunk responsive-design styled-components typescript
Last synced: about 2 months ago
JSON representation
Twitter clone built with React & TypeScript during IWconnect’s React Mentorship Program (2022). Includes Redux, Context API, dark/light theme, posts API, and avatar image integration.
- Host: GitHub
- URL: https://github.com/bazzomir/iwconnect-twitter
- Owner: Bazzomir
- Created: 2022-02-28T17:58:41.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2026-03-11T01:40:11.000Z (3 months ago)
- Last Synced: 2026-03-11T07:34:39.615Z (3 months ago)
- Topics: context-api, dark-mode, jsonplaceholder-api, pravatar-api, react, react-redux, redux, redux-thunk, responsive-design, styled-components, typescript
- Language: TypeScript
- Homepage: https://bazzomir.github.io/iwconnect-twitter/
- Size: 5.58 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Twitter Clone – React Mentorship Project
This project is a Twitter-like web application developed during the React Mentorship Program (Internship) at iwconnect in 2022.
The goal of the project was to practice real-world React development, state management, and application architecture.
## 🛠️ Tech Stack
- React + TypeScript
- React Router
- Redux (global state management)
- Context API (authentication & integrations; Dark-Light Theme)
- Styled-components
- Firebase Authentication (in progress / planned)
- Mock APIs for posts and user data
- GitHub Pages for deployment
## ✨ Features
- User authentication flow (login / register)
- Global state management with Redux
- Context API for authentication abstraction
- Dark / Light theme support
- Posts feed (API-based)
- Avatar image integration
- Protected routes
- Responsive UI inspired by Twitter
## 🧠 Architecture Notes
Redux is used as the single source of truth for global application state (user, loading, errors).
Context API is used as an integration layer (authentication logic, external services).
The project intentionally contains both Redux and Context to demonstrate understanding of their different responsibilities.
This project represents a legacy codebase refactoring exercise, common in real-world frontend projects.
## 🚀 Getting Started
Prerequisites
Node.js v16.x (recommended for compatibility with Create React App)
Installation
```npm install```
Run locally
```npm start```
Build
```npm run build```
Deploy to GitHub Pages
```npm run deploy```
## 🔧 Environment Variables
If Firebase is enabled, create a .env file and add:
```REACT_APP_FIREBASE_API_KEY=your_key_here```
```REACT_APP_FIREBASE_AUTH_DOMAIN=your_domain_here```
📚 What I Learned
Working with legacy React codebases
Refactoring without breaking existing functionality
Managing authentication and global state
Combining Redux and Context API responsibly
Debugging build and deployment issues
Preparing a project for production-like deployment
👤 Author
Developer: Bazzomir 2022-2026
Mentor: Ognen IWConnect Education Center
Developed during the React Mentorship Program (iwconnect, 2022)
Refactored and maintained as a personal learning and portfolio project.