Click me
Alphitter is the final collaborative project for Alpha Camp, which is developed within 2 weeks using Agile methodology by a four members team. Two of them are responsible for the front-end and two for the back-end. This repo shows the front-end part of the project. For the back-end code, please refer to this link.
👀 Live demo: https://weilocus.github.io/twitter/
-
Publish tweets and see the updated feed immediately
-
Like and leave comments to the tweets
-
Customize easily your profile pictures and introduction
- Register as a new user or log in to your account to access the site
- Navigate through the site by clicking different links on the sidebar
- Click on Logout button in the sidebar to log out
- Publish tweets and see the updated feed immediately
- View all tweets on the site sorted by publish time from newest to oldest
- View a specific tweet and replies listed from newest to oldest
- View tweets from a specific user sorted from newest to oldest
- View replies from a specific user sorted from newest to oldest
- View a a specific user's liked tweets sorted from newest to oldest
- Edit the user account user name, introduction, cover photo, and profile picture
- Manage your account, username, email and password settings
- Reply to other users' tweets
- Click to like or unlike tweets
- Click to follow or unfollow users
- See the top 10 users that have the most followers on the 'Recommended' section
- Log in as an administrator by using an administrator account
- View all tweets on the 'Tweet List' page
- Click to delete any tweet on the tweet list page
- Browse all registered users on the 'User List' page sorted by the number of tweets they published
- Clone the project to your local environment
$ git clone "https://github.com/KellyCHI22/twitter.git"- Open the project and type the following command in your terminal
$ npm install- Type the following command after finishing installing all the packages
$ npm run dev-
Open your browser and navigate to the following path:
http://localhost:5173/twitter -
Use this account to test a regular user account:
account: user1
password: 12345678
- Use this account to test a administrator account:
account: root
password: 12345678
- Type the following command to stop the dev server
ctrl + c- node.js 16.16.0
- vite 4.2.1
- vite-plugin-svgr 2.4.0
- react 18.2.0
- react-dom 18.2.0
- react-router-dom 6.9.0
- react-spinners 0.13.8
- styled-components 5.3.9
- clsx 1.2.1
- axios 1.3.4
- eslint 8.36.0
- prettier 2.8.4
-- public
-- src
|__ app.jsx
|__ api
|__ assets
|__ icons
|__ components
|__ elements
|__ layouts
|__ contexts
|__ pages
A million thanks to all the team members for successfully completing the project in just two weeks with the highest standard. It was a great pleasure and an honour to work with you guys!