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, React Icons 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

After checking out Appwrite Hashnode Hackathon

I brainstormed for 2-3 days and 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.

• React Icons: React Icons library is used to easily incorporate icons into the website, providing visual enhancements and intuitive user experiences.

• Netlify: The live website is deployed on Netlify, which provides easy and scalable hosting.

The Appwrite services used in this project :

• 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:

1. 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.

2. 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.

3. 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

4. Error Handling and Debugging: Implementing effective error handling and debugging mechanisms was crucial for a smooth user experience. I overcame this challenge by implementing proper error handling and utilizing browser developer tools for debugging.

5. Responsive Design: Ensuring a seamless experience across different devices and screen sizes was a challenge. I overcame this by utilizing Tailwind CSS's responsive design utilities and performing thorough testing on various devices and screen sizes.

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

If you prefer a different approach than a video demonstration, I'll guide you through the process of building the profolio step by step.

• This is the landing page which describes the whole project.

• It consists of a header, a Main section and how it works section

• The header and main section of the landing page offer a concise description, a sign-in option, theme customization, and contribution links

• How it works section describes how to use it and the flow of the product.

• This is a login page where users can sign in with either a Google Account or GitHub Account, powered by Appwrite Auth for secure authentication.

• On the profile page, users can share their name, bio, skills, and social media links, enabling others to discover and explore their unique profile details.

• On the work page, users can add their projects which Include project details, descriptions, skills utilized, and links to live previews and GitHub repositories of their projects.

• On the find page, users can search for users by name and discover individuals with shared interests, skills, and expertise.

• On the discover page, users can search by project names and technologies to uncover captivating works that align with their passions and ignite their curiosity.

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.

#Appwrite #AppwriteHackathon #Hashnode