Tripix

Shout out to #Appwrite for hosting this #AppwriteHackathon along with Hashnode 🎉.

Team Members

Keerty Verma

Description

Welcome to Tripix, your go-to platform for sharing and discovering stunning travel memories. Capture and share your adventures while exploring beautiful memories shared by fellow travelers.

With Tripix, you have full control over your posts - create, update and delete them with ease. Seamlessly authenticate using email and password or simply sign in with Google.

Join Tripix today and embark on a journey of unforgettable experiences!

Features

1. User Authentication 🔒

   Users can register and log in using their email and password. Additionally, they have the option to sign in using their Google account.

2. Memory Feed 👯‍♀️🪄📍

   Feed is a dashboard with collections of stunning travel memories shared by fellow travelers. Users can explore and search posts.

3. Create Memories 📷📸🖼️

   Users can create and share their travel memories by uploading photos and adding captions, dates, locations and travel experiences.

4. Update and Delete Memories 🖋️🗑️

   Users can edit and update or delete their existing memories.

5. Responsive Design 📱💻

   The application is designed to be responsive and provide an optimal user experience across different devices and screen sizes.

Tech Stack

1. NextJS - React Framework
   I leveraged Next.js's file-based routing to create intuitive and organized routes in my web application. Additionally, I optimized images using Next.js's built-in capabilities to ensure fast loading and improved performance.

2. Typescript

   I utilized TypeScript in my web application development, which offered the advantage of static typing, enabling early detection of errors and improving code quality.

3. Appwrite Cloud

   Appwrite Cloud is a backend platform for developing Web, Mobile, and Flutter applications without managing servers or infrastructure. It provides APIs, tools, and a management console UI to help build the apps faster and more securely.

   Features of Appwrite used :

   • Appwrite Authentication 🔒

     I utilized Appwrite's auth service to authenticate users. This simplified the authentication process and ensured seamless access.

     I opted for a combination of Google OAuth2 and email/password authentication methods. By leveraging OAuth2, I was able to quickly implement a secure authentication system, allowing users to log in using their existing accounts from Google.

   • Appwrite Database 📅

     I used the capabilities of Appwrite's Database service to effectively store and manage travel memories data for my application. I was pleasantly surprised by the ease with which I could perform Create, Read, Update, and Delete (CRUD) operations.

   • Appwrite Storage 🏬

     I leveraged Appwrite's Storage service to store travel memory images uploaded by users.

   • Appwrite Locale Service

     I used the locale service to get a comprehensive list of countries for seamless integration within the post-creation and update forms.

4. Material UI - React UI component library

   I utilized Material-UI in my project, leveraging its extensive library of pre-designed UI components and styles.

5. HTML5 and CSS3

6. Vercel
   I used Vercel to deploy my app with zero configuration and automatic scaling.

Challenges I faced during the development

1. Next.js learning curve

   As I embarked on my journey with the Next.js framework I had to face a steep learning curve that demanded time. However, as I ventured further into the depths and broadened my understanding, my experience with Next.js underwent a remarkable transformation.

2. Managing State and Data

   Efficiently managing state and app data posed a significant challenge. This was overcome by leveraging React State and Context for managing client-side data and React Query to manage server-side data.

3. Getting familiar with Appwrite

   When I first started using Appwrite, I faced a learning curve that took me some time to fully grasp its features and functionalities. However, as I delved deeper and gained a better understanding, working with Appwrite became an enjoyable and seamless experience.

4. Overcoming the limitation of attribute update in Appwrite's Database Service

   While utilizing Appwrite's database service, I encountered a limitation where attribute properties couldn't be updated once the collection contained documents. This was a little inconvenient as it necessitated the deletion of existing attributes, the creation of new ones, and the repopulation of data.

5. Responsive Design

   Creating a responsive web app posed challenges in optimizing performance for various screen sizes.

Public Code Repository 👩‍💻

Link to project source code -> https://github.com/keertyverma/tripix

Tripix Live App

Use Tripix to share & discover travel memories -> https://tripix.vercel.app/

You can use test user appwrite@test.com and password Appwrite@123 for trying it live or you can create your account.

Demo Link

Video Recording showing Tripix workflow -> https://www.youtube.com/watch?v=jA20KFUW_Ho