michalosman / social-network

Frontend part of a social network app created with React.

Social Network

Frontend part of a social network app which I made as a final project submission for The Odin Project.

Live Demo 👈

API repository

Features

Users

• Register / Log in / Log out
• Search user
• Display profile
• Edit own profile

Friendships

• Request friend
• Accept friend
• Reject friend
• Remove friend

Posts

• Create post
• Display own feed
• Like/unlike post
• Comment post

TODO

• Log in with Facebook
• Integration tests (react-testing-library)
• E2E tests (Cypress)
• PWA

Technologies used

• TypeScript
• React
• Chakra UI
• react-query
• Formik
• Yup

Getting started

Clone repository

git clone https://github.com/michalosman/social-network.git
cd social-network

Set up environment variables

VITE_SERVER_URL=<Address of the server, e.g. http://localhost:5000/>
VITE_CLOUDINARY_URL=<Cloudinary API base URL, e.g. https://api.cloudinary.com/v1_1/{cloud_name}/image/upload>
VITE_CLOUDINARY_UPLOAD_PRESET=<Cloudinary upload preset>
VITE_TEST_USER_ID=<Test user ID (optional)>

Install packages and start client

npm i
npm run build
npm run preview