Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/manikandanraji/twitter-clone-frontend

Twitter Clone Frontend
https://github.com/manikandanraji/twitter-clone-frontend

apollo-client twitter

Last synced: 3 months ago
JSON representation

Twitter Clone Frontend

Host: GitHub
URL: https://github.com/manikandanraji/twitter-clone-frontend
Owner: manikandanraji
Archived: true
Created: 2020-05-01T14:03:38.000Z (over 4 years ago)
Default Branch: master
Last Pushed: 2022-06-10T13:56:55.000Z (over 2 years ago)
Last Synced: 2024-08-01T21:40:05.609Z (6 months ago)
Topics: apollo-client, twitter
Language: JavaScript
Homepage:
Size: 3.72 MB
Stars: 361
Watchers: 9
Forks: 99
Open Issues: 6
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Twitter Clone Frontend

**NOTE: As of 10-06-2022 19:24 IST, I am archiving this repository. It was fun while it lasted.**

Twitter clone frontend built with React and Apollo Client

If you are looking for the backend repo, [click here](https://github.com/manikandanraji/twitter-clone-backend).

## Core Packages

1. apollo-client - state management, executing graphql queries and mutations, caching results
2. styled-components - styling
3. react-router - routing
4. react-toastify - toast notifications

## Features

- Login / Signup
- New Tweet
- Like
- Retweet
- Comment
- View Profile
- Edit Profile
- Search by users, tags, people
- Dark theme / Light theme

## How to setup locally

- Create a .env file at the root directory
- Make sure you have these variables setup

```js
REACT_APP_DEV=
REACT_APP_PROD=
REACT_APP_CLOUDINARY_URL=https://api.cloudinary.com/v1_1//image/upload
```

- Then run npm install && npm start to see the twitter clone in action.

## UI

## Home
![Home](screenshots/home.png)

## Explore
![Explore](screenshots/explore.png)

## Profile
![Profile](screenshots/profile.png)

## Edit Profile
![Edit Profile](screenshots/edit_profile.png)

## New Tweet
![New Tweet](screenshots/new_tweet.png)

## Tweet
![Tweet](screenshots/tweet.png)