The Profolio: Appwrite Hashnode Hackathon

#Appwrite #AppwriteHackathon #Hashnode

Team Details

Manikanta - @Manikanta528

Description of Project

The Profolio is a web application built using React, Appwrite, Tailwind CSS, Vite, and AOS, and deployed on Netlify. It is a personal portfolio website where users can showcase their projects and skills. Discover exciting projects that align with your interests and join forces with like-minded individuals.

Idea

I decided to build The Profolio as an open-source website for new developers because I believe in the power of collaboration and knowledge sharing within the developer community. As an aspiring developer, I understand the importance of having a platform to showcase our projects and skills, especially when starting our developer career.

By creating The Profolio, we wanted to provide a space where new developers can confidently present their work, gain exposure, and connect with others who share similar interests. We believe that collaboration and networking are vital for growth and learning, and The Profolio aims to facilitate these opportunities.

Additionally, as an open-source project, I encourage contributions from the community. I believe in the collective wisdom of developers worldwide and welcome anyone interested in improving the platform, adding new features, or fixing bugs to join in making The Profolio even better.

I am passionate about empowering new developers and contributing to their success, and that's why I chose to tackle this challenge by building The Profolio as an open-source website.

Tech Stack

Appwrite: Appwrite is utilized for its database, authentication, and storage services. It allows users to securely store their project data, authenticate users, and handle file uploads.
React: The project is developed using the React JavaScript library, which provides a component-based approach for building user interfaces.
Tailwind CSS: Tailwind CSS is used for styling the application. It provides a utility-first approach to CSS, making it easier to design and customize the UI.
Vite: Vite is the build tool used in the project. It offers fast development server startup and optimized build times.
AOS: AOS (Animate on Scroll) library is used to add smooth animations to various elements on the website, enhancing the user experience.
Netlify: The live website is deployed on Netlify, which provides easy and scalable hosting.

The Appwrite services used in this project include:

Authentication: Appwrite's authentication service is used for Google OAuth and GitHub OAuth for authentication.
Database: Appwrite's database service is used to store and retrieve users data, and project data.
Storage: Appwrite's storage service is utilized to handle file uploads, such as project images and user profile images.

These services played a crucial role in building The Profolio, providing secure user management, efficient data storage, and seamless file access.

Challenges I Faced

Throughout the development process, I encountered several challenges. Some of the major ones included:

Learning Curve: As I incorporated multiple technologies into the project, including React, Appwrite, and Tailwind CSS, there was a learning curve associated with each of them. I had to familiarize myself with the documentation and best practices to ensure smooth integration.
Authentication and Authorization: Implementing user authentication and authorization was a complex task. I had to carefully handle user sessions, secure user data, and manage access to various features within the application.
Styling and UI Design: Tailwind CSS provided a unique approach to styling, which required me to understand its utility classes and design patterns. Ensuring a visually appealing and responsive UI was a challenge that I overcame through experimentation

Despite these challenges, I was able to overcome them by leveraging online resources, consulting the documentation, and finding effective solutions.

Public Code Repo

You can access the public code repository for The Profolio project at the following link: GitHub Repository

Demo Link

To see a live demonstration of The Profolio, visit the following link: The Profolio Demo

Demo video

%[https://youtu.be/3_EapwJlNkk]

Tools used in the building process

Notion

The notion is used for note-making for idea generation, key functionalities, workflow and bookmarking stuff.

Figma

Figma is used to create sample designs, color palette and images for landing page & blog.

Trello

Trello is used for task tracking of the project.

Future Updates

Enhanced Project Filtering and Search
Social Media Integration and more Customization Options for users

Conclusion

I hope you enjoy exploring The Profolio, this is my submission of the Appwrite Hashnode Hackathon and appreciates your feedback and suggestions.