Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/01zulfi/quieter
social media for quiet folks
https://github.com/01zulfi/quieter
firebase react react-router-dom react-testing-library styled-components typescript
Last synced: 30 days ago
JSON representation
social media for quiet folks
- Host: GitHub
- URL: https://github.com/01zulfi/quieter
- Owner: 01zulfi
- License: mit
- Created: 2022-01-24T11:04:27.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2022-05-07T11:42:01.000Z (over 2 years ago)
- Last Synced: 2024-10-02T19:41:43.242Z (about 2 months ago)
- Topics: firebase, react, react-router-dom, react-testing-library, styled-components, typescript
- Language: TypeScript
- Homepage: https://quieter-app.web.app
- Size: 2.26 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# quieter: social media for quiet folks
[Visit the website](https://quieter-app.web.app/)
## About the Project
A social media application where users can join communities, create posts and comment. Visit the [about page of quieter](https://quieter-app.web.app/about) to learn about quieter specific terms.
## Technologies Used
- [React](https://reactjs.org/)
- [TypeScript](https://www.typescriptlang.org/)
- [Firebase](https://firebase.google.com/)
- [React Testing Libary](https://testing-library.com/docs/react-testing-library/intro/)
- [React Router](https://reactrouter.com/)
- [Styled Components](https://styled-components.com/)
## Getting Started
1. Clone the repository.
```bash
git clone [email protected]:01zulfi/quieter.git
```
2. Make sure all the tests pass.
```bash
npm test
```
3. Go to [console.firebase.com](https://console.firebase.google.com/) and create a new project. Firebase will provide a configuration object. Replace it with the one in [`src/utils/firebase-config.ts`](https://github.com/01zulfi/quieter/blob/main/src/utils/firebase-config.ts).
- Make sure to enable firebase firestore and authentication.
4. Serve the app locally. It should be live at http://localhost:3000/.
```bash
npm start
```
## Features
- Users can login the app through email and google. There's also a sign in as guest option, though guest users can only view certain parts of the app. Guest users cannot interact with quieter i.e. they cannot post, comment, and like.
- Users can create new communities; the user who creates a community will now be the admin. Admins can edit community details and delete the community at their discretion
- Users can create posts. Posts are always linked to a community. The user who creates a post is referred to as the author. Authors can edit post details and delete the post at their discretion.
- Users can create comments on posts. The user who creates a comment is referred to as the author. Authors can delete the comment at their discretion.
- Users can like posts.
- Users can join/leave communities. Joining a community is not mandatory for a user to create a post in it.
- Users have a personalized feed at their homepage. It shows posts from their joined communities and from the communities they're admin at. It will also show posts that they have created.
- Users can view their profile stats at their page. They can choose to hide their profile stats if they wish.
- Users can select avatars from a predefined selection.
- Users can switch between a light and a dark theme.
## Attributions
1. Image in Sign in Page from [unsplash](https://unsplash.com/photos/5d5H42WDT4M).
2. "Rubik" font and icons from [google](https://fonts.google.com/).
3. Avatar SVGs from [svgrepo.com](https://www.svgrepo.com/).
4. Color palette for light and dark theme from [nordtheme](https://www.nordtheme.com/).
-----
### Sign in page (dark mode):
### Homepage in light and dark mode:
More Screenshots
#### Signed in user's profile page:
#### Avatar selection page:
#### About page:
#### Box (quieter's term for groups/communities) page:
#### String (quieter's term for posts/threads) page:
#### Another user's profile page with and without their privacy turned on:
