Skip to content

Commit 9bc4454

Browse files
Bashar-OmarBashar-Omar
committed
Uploading Files
0 parents  commit 9bc4454

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

94 files changed

+10259
-0
lines changed

‎.eslintrc.json

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"env": {
3+
"browser": true,
4+
"es2021": true
5+
},
6+
"extends": [
7+
"standard",
8+
"plugin:react/recommended",
9+
"plugin:tailwindcss/recommended",
10+
"prettier"
11+
],
12+
"parserOptions": {
13+
"ecmaVersion": "latest",
14+
"sourceType": "module"
15+
},
16+
"plugins": ["react"],
17+
"rules": {}
18+
}

‎.gitignore

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎.prettierrc

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"trailingComma": "es5",
3+
"tabWidth": 2,
4+
"semi": true,
5+
"singleQuote": false,
6+
"jsxSingleQuote": false,
7+
"printWidth": 80,
8+
"bracketSameLine": true,
9+
"tailwindFunctions": [
10+
"clsx",
11+
"tv"
12+
]
13+
}

‎README.md

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
<div align="center">
2+
<br />
3+
<a href="https://youtu.be/_W3R2VwRyF4?feature=shared" target="_blank">
4+
<img src="https://github.com/adrianhajdin/social_media_app/assets/151519281/be514a19-3cbb-48b7-9acd-2cf4d2e319c4" alt="Project Banner">
5+
</a>
6+
<br />
7+
<div>
8+
<img src="https://img.shields.io/badge/-React_JS-black?style=for-the-badge&logoColor=white&logo=react&color=61DAFB" alt="react.js" />
9+
<img src="https://img.shields.io/badge/-Appwrite-black?style=for-the-badge&logoColor=white&logo=appwrite&color=FD366E" alt="appwrite" />
10+
<img src="https://img.shields.io/badge/-Tailwind_CSS-black?style=for-the-badge&logoColor=white&logo=tailwindcss&color=06B6D4" alt="tailwindcss" />
11+
<img src="https://img.shields.io/badge/-React_Query-black?style=for-the-badge&logoColor=white&logo=reactquery&color=FF4154" alt="reactquery" />
12+
<img src="https://img.shields.io/badge/-Typescript-black?style=for-the-badge&logoColor=white&logo=typescript&color=3178C6" alt="typescript" />
13+
</div>
14+
15+
<h1 align="center">A Social Media Application SnapGram</h1>
16+
</div>
17+
18+
## 📋 <a name="table">Table of Contents</a>
19+
20+
1. 🤖 [Introduction](#introduction)
21+
2. ⚙️ [Tech Stack](#tech-stack)
22+
3. 🔋 [Features](#features)
23+
4. 🤸 [Quick Start](#quick-start)
24+
5. 🔗 [Contact](#contact)
25+
26+
## <a name="introduction">🤖 Introduction</a>
27+
28+
Explore social media with this user-friendly platform that has a nice look and lots of features. Easily create and explore posts, and enjoy a strong authentication system and quick data fetching using React Query for a smooth user experience.
29+
30+
## <a name="tech-stack">⚙️ Tech Stack</a>
31+
32+
- React.js
33+
- Appwrite
34+
- React Query
35+
- TypeScript
36+
- Shadcn
37+
- Tailwind CSS
38+
39+
## <a name="features">🔋 Features</a>
40+
41+
👉 **Authentication System**: A robust authentication system ensuring security and user privacy
42+
43+
👉 **Explore Page**: Homepage for users to explore posts, with a featured section for top creators
44+
45+
👉 **Like and Save Functionality**: Enable users to like and save posts, with dedicated pages for managing liked and saved content
46+
47+
👉 **Detailed Post Page**: A detailed post page displaying content and related posts for an immersive user experience
48+
49+
👉 **Profile Page**: A user profile page showcasing liked posts and providing options to edit the profile
50+
51+
👉 **Browse Other Users**: Allow users to browse and explore other users' profiles and posts
52+
53+
👉 **Create Post Page**: Implement a user-friendly create post page with effortless file management, storage, and drag-drop feature
54+
55+
👉 **Edit Post Functionality**: Provide users with the ability to edit the content of their posts at any time
56+
57+
👉 **Responsive UI with Bottom Bar**: A responsive UI with a bottom bar, enhancing the mobile app feel for seamless navigation
58+
59+
👉 **React Query Integration**: Incorporate the React Query (Tanstack Query) data fetching library for, Auto caching to enhance performance, Parallel queries for efficient data retrieval, First-class Mutations, etc
60+
61+
👉 **Backend as a Service (BaaS) - Appwrite**: Utilize Appwrite as a Backend as a Service solution for streamlined backend development, offering features like authentication, database, file storage, and more
62+
63+
and many more, including code architecture and reusability
64+
65+
## <a name="quick-start">🤸 Quick Start</a>
66+
67+
Follow these steps to set up the project locally on your machine.
68+
69+
**Prerequisites**
70+
71+
Make sure you have the following installed on your machine:
72+
73+
- [Git](https://git-scm.com/)
74+
- [Node.js](https://nodejs.org/en)
75+
- [npm](https://www.npmjs.com/) (Node Package Manager)
76+
77+
**Cloning the Repository**
78+
79+
```bash
80+
git clone https://github.com/Bashar-Omar/SnapGram.git
81+
cd SnapGram
82+
```
83+
84+
**Installation**
85+
86+
Install the project dependencies using npm:
87+
88+
```bash
89+
npm install
90+
```
91+
92+
**Set Up Environment Variables**
93+
94+
Create a new file named `.env` in the root of your project and add the following content:
95+
96+
```env
97+
VITE_APPWRITE_URL=
98+
VITE_APPWRITE_PROJECT_ID=
99+
VITE_APPWRITE_DATABASE_ID=
100+
VITE_APPWRITE_STORAGE_ID=
101+
VITE_APPWRITE_USER_COLLECTION_ID=
102+
VITE_APPWRITE_POST_COLLECTION_ID=
103+
VITE_APPWRITE_SAVES_COLLECTION_ID=
104+
```
105+
106+
Replace the placeholder values with your actual Appwrite credentials. You can obtain these credentials by signing up on the [Appwrite website](https://appwrite.io/).
107+
108+
**Running the Project**
109+
110+
```bash
111+
npm start
112+
```
113+
114+
Open [http://localhost:3000](http://localhost:3000) in your browser to view the project.
115+
116+
## Contact
117+
118+
- Website [Incodey](https://incodey.com/)
119+
- GitHub [Bashar-Omar](https://github.com/Bashar-Omar)
120+
- linkedin [bashar-omar](https://www.linkedin.com/in/bashar-omar/)

‎components.json

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"$schema": "https://ui.shadcn.com/schema.json",
3+
"style": "default",
4+
"rsc": false,
5+
"tsx": true,
6+
"tailwind": {
7+
"config": "tailwind.config.js",
8+
"css": " src/globals.css",
9+
"baseColor": "slate",
10+
"cssVariables": false
11+
},
12+
"aliases": {
13+
"components": "@/components",
14+
"utils": "@/lib/utils"
15+
}
16+
}

‎index.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/assets/icons/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Snapgram</title>
8+
<link
9+
href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
10+
rel="stylesheet"
11+
/>
12+
</head>
13+
<body>
14+
<div id="root"></div>
15+
<script type="module" src="/src/main"></script>
16+
</body>
17+
</html>

0 commit comments

Comments
 (0)