Vite
React.js
TypeScript
Tailwind CSS
Appwrite
React Query
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.
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.
-
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.
To run the project in your local environment, follow these steps:
- Clone the repository to your local machine.
- Run
npm install
oryarn
in the project directory to install the required dependencies. - Run
npm run start
oryarn start
to get the project started. - Open http://localhost:5173 (or the address shown in your console) in your web browser to view the app.