19 year old Canadian software engineer trying to make cool stuff.

# By students, for students

That was the central idea when building **devCircle** - a platform where students can share their side projects, receive valuable peer feedback, and find inspiration from others in similar situations.

I was tired of the repetitive side projects recommended by creators (to-do lists, personal portfolios, and weather apps). So, I built a space where people can showcase their original ideas. By sharing their projects, they gain exposure and valuable feedback from peers worldwide, while also inspiring others to create unique projects.

# Features

**devCircle** sports numerous unique features that make it great for sharing projects and receiving feedback.

- **Markdown text editor** for posts that allows for great customization of post content
- **Suggestions feature** that allows users to directly suggest changes or new features to the developers of the project
- **Comprehensive tag** and tech stack functionality that allows for seamless categorization of projects
- The ability to **link the project repository directly in the post**, allowing for easy access via the GitHub API
- **Suggestion feed** for authors of post that allow them to sort the suggestions into categories such as "to-do", "implemented", and "dismissed"
- **Customizable user profile** with unique fields such as the user's tech stack, interests, educational institution, GitHub, LinkedIn, etc. 

## The rest of these features aren't so unique but I thought they were cool so here they are:

- Fully **mobile-adaptive** website 
- **Authentication** for secure access
- **Algolia AI powered high speed full-text search** for users to search for posts by title, tags, or technologies used in the project
- **Post image and post cover image upload** functionality for additional post customization
- **Post draft system** to ensure that users do not lose their post content if they accidentally leave the page
- Unique **custom Firebase usernames**
- Bot-friendly content, **fully search engine optimized**
- Advanced **SSR, SSG, and ISR techniques**
- Firestore **realtime CRUD and data modeling**
- **Reactive forms** via the react-hook-form package
- **Realtime likes** for all posts
- and more!

# Challenges Encountered

I did all of **devCircle**'s styling in pure CSS, which turned out to be a huge mistake. To save time, I avoided learning a new framework or library and stuck with what I knew. However, using premade components from libraries like [Material UI](https://mui.com/material-ui/) or [shadcn/ui](https://ui.shadcn.com/) would have saved me countless hours spent styling components, ensuring proper spacing, and making the site mobile-compatible.

In total, **devCircle** has ~1,700 lines of CSS. I don't know if that's a lot, but it certainly feels overwhelming, especially with the redundant code that needs refactoring. Just looking at the CSS files *brings me physical pain*, and I will never use pure CSS for a large project like this ever again.

Additionally, learning how to write Firebase security rules was also a huge pain, however, it is a valuable skill that I will be able to use again in future projects.

# What I Learned

I built **devCircle** using React, Next.js, and Firebase. Before this project, I had only worked with React, so I learned Next.js and Firebase entirely during the development process. This project was extremely enriching, not only in terms of gaining knowledge in these technologies but also in the satisfaction of deploying a completed, functional product.

I can't remember exactly when the idea of **devCircle** came to me, but once it did, I knew I had to create it. As a student, I've experienced the challenge of deciding what side projects to work on, and I recognized the need for a platform like this.

Even though this was uncharted territory for me, having previously only completed smaller-scale projects, I embraced the challenge and was able to create something I'm proud of. At the time of this post (July 2nd, 2024), I've been working on **devCircle** daily for about a month and a half, my first long term project. My hope is that **devCircle** is able to inspire students to pursue more creative and meaningful side projects.

# Inspiration

While creating **devCircle**, I was inspired by [DEV Community](https://dev.to/), [Devpost](https://devpost.com/), and [X](https://x.com/home) (formerly Twitter) in their layouts and the way the websites function. I also stole [Spotify's dark theme colors](https://blog.karenying.com/posts/50-shades-of-dark-mode-gray) for use on this website.

# Future Plans

This is definitely just the beginning for **devCircle**. I have many features that I still want to implement, but it all depends on user activity and time, with the school term coming up. 

## Some ideas for the future:
- Add more sign in options other than just Google
- Notification system
- Direct messages between users
- Pinning posts to profile
- Mobile app (React Native)

If there are any features you would like to see on **devCircle**, feel free to leave a suggestion below and I will definitely take a look!

# Conclusion

Thank you for reading this lengthy post about the creation of the platform you are currently using, **devCircle**. I hope it is an enjoyable experience for you and others who may choose to use it, and is able to make a difference in your side project finding journey!

Ethan Liu

Tech Stack

Education

Location

Interests

Current Project

Currently Learning

Introducing devCircle!