My own version of the original Snapgram project by Adrian Hajdin
- Integrated chat
- Upload up to 10 multimedia contents per post
- Improved UI with new layouts, components, interactions and animations
- Online/offline status updated only at login/logout
- Follow/unfollow users functionality
- New Software Architecture
- Testing: Unit, Integration, End-to-End, Performance
- Dockerize the project for easier deployment
- Better Appwrite Authentication, email verification
This is so far the biggest project I've worked on by myself, besides the forums that have been very useful when I was confused, I've learned and reviewed a lot of concepts and technologies, I hope you find it useful and learn something new from it too!.
This project came up after finishing the video tutorial Build and Deploy a Full Stack Social Media App | React JS, Appwrite, Tailwind CSS, React Query After watching it, I continued with the second part of the tutorial on his blog JavaScript Mastery Blog . In which I implemented many other features and had complications with others. Finally I tried to implement the original design made in Figma.
Appwrite uses a mix between NOSQL and SQL databases. It uses document-based queries as minimum units of information.
See more here
The design was made by Adrian Hajdin and it's available on Figma. The design is very well done and I tried to implement it as best as I could, but I had some difficulties with the design, so I made my own designs :^).
Originally, the project was built using the following technologies:
This project uses Backend as a Service (BaaS) for the backend. The BaaS provider used is Appwrite.
Follow these steps to set up the project locally on your machine.
Make sure you have the following installed on your machine:
# Cloning via HTTPS
git clone https://github.com/Flavio-Ore/Snapgram-2.git
# Proyect dir
cd social_media_appInstall the project dependencies using your preferred package manager:
npm install yarn install pnpm installCreate a new file named .env in the root of your project and add the following env variables:
Note
Consider using the database schema to guide you.
VITE_APPWRITE_PROJECT_ID=""
VITE_APPWRITE_ENDPOINT=""
VITE_APPWRITE_DATABASE=""
VITE_APPWRITE_STORAGE_POSTS_FILES=""
VITE_APPWRITE_STORAGE_PROFILE_IMAGES=""
VITE_APPWRITE_DATABASE_COLLECTION_SAVES_ID=""
VITE_APPWRITE_DATABASE_COLLECTION_USERS_ID=""
VITE_APPWRITE_DATABASE_COLLECTION_POSTS_ID=""
VITE_APPWRITE_DATABASE_COLLECTION_MESSAGES_ID=""
VITE_APPWRITE_DATABASE_COLLECTION_FOLLOWERS_ID=""
VITE_APPWRITE_DATABASE_COLLECTION_MESSAGE_ID=""
VITE_APPWRITE_DATABASE_COLLECTION_CHAT_MEMBER_ID=""
VITE_APPWRITE_DATABASE_COLLECTION_CHAT_ROOM_ID=""Replace the placeholder values with your actual Appwrite credentials. You can obtain these credentials by signing up on the Appwrite website.
See the package.json file for the available scripts. You can run the project using the following commands:
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"lint-standard": "standard && node main.tsx",
"preview": "vite preview"
}Use the "dev" script to start the development server on your local machine:
npm run dev yarn run dev pnpm run devOpen http://localhost:5173/ in your browser to view the project.
If there's anything you'd like to add or change, please feel free to open an issue or a pull request. I'd love to hear your feedback and suggestions.
Also, you can contact me on discord, here's my user id: ph4lanx :)
- Assets used in the project are here