Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/felipecastrosales/ui-twitter
UI Twtter - Masterclass React with Rocketseat
https://github.com/felipecastrosales/ui-twitter
clone clone-website phosphoricons react react-hooks react-router react-router-dom reactjs twitter twitter-clone ui uiclone
Last synced: 14 days ago
JSON representation
UI Twtter - Masterclass React with Rocketseat
- Host: GitHub
- URL: https://github.com/felipecastrosales/ui-twitter
- Owner: felipecastrosales
- Created: 2024-08-28T00:39:07.000Z (5 months ago)
- Default Branch: master
- Last Pushed: 2024-09-28T13:38:11.000Z (4 months ago)
- Last Synced: 2024-11-23T13:19:02.068Z (2 months ago)
- Topics: clone, clone-website, phosphoricons, react, react-hooks, react-router, react-router-dom, reactjs, twitter, twitter-clone, ui, uiclone
- Language: TypeScript
- Homepage:
- Size: 39.1 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Twitter UI Clone
This project is a Twitter UI clone built with React, TypeScript, and Vite. It aims to replicate some of the core features and design elements of Twitter's user interface.
# Figma Design
You can view the design layout for this project on Figma:
[Twitter UI Clone - Figma Design](https://www.figma.com/community/file/1202694130789327431)
## Features
- Home timeline
- Tweet composition
- Tweet display
- Responsive design
## Technologies Used
- React 18.3.1
- TypeScript
- Vite
- React Router
- Phosphor Icons
## Project Structure
The project follows a standard React application structure:
- `src/`: Contains the main source code
- `components/`: Reusable React components
- `pages/`: Main page components
- `layouts/`: Layout components
- `assets/`: Static assets like images
- `global.css`: Global styles
## Getting Started
1. Clone the repository
2. Install dependencies:
```
npm install
```
3. Run the development server:
```
npm run dev
```
## Available Scripts
```6:11:package.json
"scripts": {
"dev": "vite",
"build": "tsc -b && vite build",
"lint": "eslint .",
"preview": "vite preview"
},
```
- `dev`: Runs the app in development mode
- `build`: Builds the app for production
- `lint`: Runs ESLint to check for code quality issues
- `preview`: Previews the production build locally
## Key Components
### Timeline
The Timeline component displays a list of tweets and allows users to compose new tweets:
```8:65:src/pages/Timeline.tsx
export function Timeline() {
const [newTweet, setNewTweet] = useState('')
const [tweets, setTweets] = useState([
'Hello, World!',
'This is a tweet!',
'This is another tweet!',
])
function createNewTweet(event: FormEvent) {
event.preventDefault()
const tweet = newTweet
tweets.push(tweet)
setTweets([newTweet, ...tweets])
setNewTweet('')
console.log('New tweet:', tweet)
console.log('Tweets:', tweets)
}
function handleKeyDown(event: KeyboardEvent) {
if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
setTweets([newTweet, ...tweets])
setNewTweet('')
}
}
return (
{
setNewTweet(event.target.value)
}}
/>
Tweet
{
tweets.map((tweet, index) => (
))
}
)
}
```
### Tweet
The Tweet component represents an individual tweet:
```5:49:src/components/Tweet.tsx
interface TweetProps {
content: string;
}
export function Tweet(
props: TweetProps,
) {
return (
Felipe Castro Sales
@felipecastrosales
{props.content}
3
5
10
);
}
```
### Sidebar
The Sidebar component provides navigation and the tweet button:
```8:53:src/components/Sidebar.tsx
export function Sidebar() {
return (
Home
Explore
Notifications
Messages
Bookmarks
Lists
Profile
More
Tweet
);
}
```
## Styling
The project uses CSS modules for component-specific styles and a global CSS file for common styles:
```1:27:src/global.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--twitter-blue: #1da1f2;
}
body {
color: #0f1419;
-webkit-font-smoothing: antialiased;
}
body, input, textarea, button {
font: 400 1rem 'Roboto', sans-serif;
}
button {
cursor: pointer;
}
a {
color: inherit;
}
```
## Routing
React Router is used for navigation:
```1:21:src/routes.tsx
import { createBrowserRouter } from "react-router-dom";
import { Timeline } from "./pages/Timeline";
import { Status } from "./pages/Status";
import { Default } from "./layouts/Default";
export const router = createBrowserRouter([
{
path: '/',
element: ,
children: [
{
path: '/',
element: ,
},
{
path: '/status',
element: ,
},
]
}
]);
```
## Development
This project uses ESLint for code quality and TypeScript for type checking. The configuration can be found in the `eslint.config.js` and `tsconfig.json` files.