My version of the original Snapgram project by Adrian Hajdin
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.
The original features were implemented in the project, but I also added some new features, such as:
🤜 Integrated chat: You can now chat with other users, create, delete and edit messages, as well as view the number of unread messages.
🤜Many more post and ...videos?: You can now upload videos or images in formats validated in the forms. You can upload up to 10 multimedia contents :^).
🤜 Improved UI: New button layouts, new ShadCN components, new interactions and animations. Updated UI considering small, medium or large screen devices.
🤜 Are you online: Online or offline status is updated only at login or logout.
🤜 Followers: You can now follow users and be followed by others.
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