https://github.com/williamfridh/semli

A simple social-network web app built for educational purposes.
https://github.com/williamfridh/semli

firebase firebase-auth firebase-database hooks-api-react reactjs social-network

Last synced: 26 days ago
JSON representation

A simple social-network web app built for educational purposes.

• Host: GitHub
• URL: https://github.com/williamfridh/semli
• Owner: williamfridh
• License: other
• Created: 2021-10-24T21:51:40.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2024-05-15T10:20:44.000Z (8 months ago)
• Last Synced: 2024-10-20T03:13:59.748Z (3 months ago)
• Topics: firebase, firebase-auth, firebase-database, hooks-api-react, reactjs, social-network
• Language: TypeScript
• Homepage:
• Size: 296 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# SEMLI - A simple social app

Semli is a simple social app built for educational purposes. It's based on React with a responsive design and minimalistic functionality. I decided to build it right after finishing a TypeScript course at [Codecademy](https://www.codecademy.com/learn/learn-typescript) to solidify my existing knowledge and learn some additional ones.

## Functions

- Login using Google account

- Post with hashtags

- Hashtag search

- Like/unlike post

- Add profile picture

## Technologies used

![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white) ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white) ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white) ![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white) ![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB) ![React Router](https://img.shields.io/badge/React_Router-CA4245?style=for-the-badge&logo=react-router&logoColor=white) ![NPM](https://img.shields.io/badge/NPM-%23000000.svg?style=for-the-badge&logo=npm&logoColor=white) ![Firebase](https://img.shields.io/badge/firebase-%23039BE5.svg?style=for-the-badge&logo=firebase) ![GitHub](https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white) ![Styled Components](https://img.shields.io/badge/styled--components-DB7093?style=for-the-badge&logo=styled-components&logoColor=white)

I decided not to build this project using Redux to get more practice using existing hooks and custom ones. Using Redux for this project would also be unnecessary due to its simplicity.

## Comment

There are multiple parts of the applications that can be improved and functions to be added. However, since this was for educational purposes, I decided to not dive too deep into this.

The rules used for Firebase are available in the files [firestore.rules](firestore.rules) and [storage.rules](storage.rules).