This is the official website of the Postss Social App. Postss is a social media app, similar to Threads.com, that enables users to socialize and engage in discussions with people worldwide.
- Homepage:
- User login/signup/logout UI
- Latest posts from all users
- Profile page navigation
- New post UI
- Signup: Registration page for users to create a new account
- Username (unique)
- Email (unique)
- Password (required)
- Admin confirmation (optional)
- Login:
- Password
- Profile Management:
- User's bio
- Edit profile UI
- New post UI
- List of user's posts
- List of accounts the user is following
- List of posts the user likes
- List of profiles following the user
- Edit profile: Allow users to update their profile
- First name (optional)
- Last name (optional)
- Username (unique)
- Bio (required)
- Avatar (optional)
- Email (unique)
- Website (optional)
- Admin passcode (optional)
- Delete account UI
- GitHub page: Auto-login GitHub users
- Explore: Allow users to find and follow one another.
- List all users' bios
- Post page:
- Like UI
- Comment UI
- Delete UI (admin-only)
- List the post's comments
- Subscriber: Follower of an account
- Owner: Creator of an account
- Admin: An administrator
| Privilege | Subscriber | Owner | Admin |
|---|---|---|---|
| Create an account | Yes | Yes | Yes |
| Create post | Yes | Yes | Yes |
| Manage post | No | Yes | No |
| Delete post | No | No | Yes |
| Send follow requests | Yes | Yes | Yes |
| Comment | Yes | Yes | Yes |
| Manage profile | No | Yes | No |
| Delete personal account | Yes | Yes | No |
| Delete non-personal account | No | No | Yes |
- Date-fns: Format date
- ESLint: Lint code
- Next.js: Provide building blocks to create React-based web application
- React: Create user interfaces from JavaScript components
- Tailwind CSS: Use utility classes to write CSS directly on elements
- TypeScript: Type check code
- Socket IO: Enable event-based simultaneous communication between server and client
- SWR: Use React Hooks for optimal data fetching
Note: The backend must be running for this website to function appropriately.
- Clone the project
git clone https://github.com/oluwatobiss/postss-frontend.git- Navigate into the project repo
cd postss-frontend- Install dependencies
npm install- Create an environment variable file
touch .env- Define the project's environment variables
NEXT_PUBLIC_DEMO_EMAIL=example@mail.com
NEXT_PUBLIC_DEMO_PASSWORD=example-password
NEXT_PUBLIC_BACKEND_URI=http://localhost:3001
- Start the server
npm run dev