Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/bmukesh23/splice

🌀 A Social Media Web App built with React and TypeScript.
https://github.com/bmukesh23/splice

appwrite instagram react typescript vite

Last synced: 2 days ago
JSON representation

🌀 A Social Media Web App built with React and TypeScript.

Awesome Lists containing this project

README 

        


A Social Media Web App built with React and TypeScript and other technologies. This social media app is purposefully made for the web, like a web app, but it also works on mobile devices.



## 📦 Technologies



- `Vite`

- `React.js`

- `TypeScript`

- `Tailwind CSS`

- `Appwrite`

- `React Query`



## ✨ Features



Explore the possibilities with our app, Splice:



- **User Authentication**: By using Appwrite's email verification functionality for enhancing user authentication, it ensures that all user accounts are associated with valid and verified email addresses.



- **View Profiles**: Get to know yourself and others by viewing profile details effortlessly.



- **Post Your Moments**: Share your favorite moments with ease by uploading posts.

  

- **Like and Save**: Interact with posts by liking and saving them for later.

  

- **Search Effortlessly**: Find specific posts quickly and easily using our intuitive search feature.

  

- **Drag and Drop**: Upload images seamlessly by simply dragging and dropping them onto the platform.

  

- **Discover Content**: Explore posts from other users and dive into a world of captivating visuals.

  

- **Customize Your Profile**: Personalize your profile by changing your profile picture, name, and bio to reflect your personality.

  

- **Edit and Delete**: Have control over your content - edit or delete posts, content, and more with ease.



## 📝 Process



Starting with setting up Appwrite, I then proceeded to implement authentication. Following this, I established routing, both public and private, and focused on designing the sidebar, top bar, and other essential components. From there, I developed pages such as the home feed, explore, and user directory, etc.



Afterward, I delved into refining the finer details, such as implementing drag-and-drop functionality for images and files, enabling post saving, and incorporating profile customization options like changing the profile picture, name, and bio.



The most challenging aspect was determining backend on the appwrite because it is new for me and it is a valuable skill I acquired during this process was setting up Appwrite, which was entirely new to me and is something I'll carry forward into future projects.



## 💭 How Can It Be Improved?



- **Comment and Share Features**: Enhance user engagement by enabling them to comment on posts and share them.

  

- **Mutual Following**: Foster connections between users by implementing mutual following capabilities.

  

- **Testing Implementation**: Improve project stability and reliability by implementing thorough testing procedures in the future.



## 🚦 Running the Project



To run the project in your local environment, follow these steps:



1. Clone the repository to your local machine.

2. Run `npm install` or `yarn` in the project directory to install the required dependencies.

3. Run `npm run start` or `yarn start` to get the project started.

4. Open [http://localhost:5173](http://localhost:5173) (or the address shown in your console) in your web browser to view the app.