# 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!

Introducing devCircle!

# "In English Please!" Project Overview

![alt](https://firebasestorage.googleapis.com/v0/b/dev-circle-1b2a0.appspot.com/o/uploads%2Fr5QyAQfyaOhdxIU8lbs8zYjJAFw2%2F1717614220629.jpeg?alt=media&token=da1810ee-df3b-46da-88b1-a823abb5b9cf)

## Inspiration 🤔
Our group noticed that we struggle with knowing what we really consume during our daily lives. This made us realize that many of the ingredients in common foods are unknown to the average person, and additionally, much effort is required to search and understand every aspect of what we ingest. Stemming from this gap in knowledge, we created "In English Please!".

## What it does 📙
"In English Please!" is quite self-explanatory; it translates complicated ingredients into English that anyone can understand. Simply take a photo of the ingredients list of any product, upload it to our website, and we will seamlessly provide a "translation" to the user. For example, complicated ingredients such as sucralose and neotame would be "translated" to "artificial sweetener". You can then hover over the original ingredients (which will now be bolded) to view the translation. Additionally, you can set "flags" to highlight ingredients of your choosing. Finally, understand what you're consuming, and let "In English Please!" lead you to a healthier lifestyle!

## How we built it 🚧
The backend was built using Node.js, Express, Google Cloud Storage buckets, and the Google Vision AI API. The frontend was built in React.

## Challenges we ran into 🤯
Our group had a lot of trouble coming up with an idea. We wanted to create something unique and memorable, however, we had many different ideas and this led to frequent differences in vision. Other than preliminary planning issues, we had difficulty integrating the front and back end of our web application.

## Accomplishments that we're proud of 🥹
Creating a fully fledged web application that serves its intended purpose, without too many compromises and despite many setbacks. We're also working (mostly) working together for the first time and we have a first-time hacker, so we're proud that we were able to get to know each other and put together something cool this weekend.

## What we learned 🥹
We (collectively) learned about the intricacies of web deployment and integrating the front and back ends of the web application. Additionally, we became more familiar with the Google Cloud suite, specifically by utilizing Google Cloud Storage and the Google Vision AI API.

## What's next for "In English Please!" ⏭️
- Find/create a larger database for more ingredients
- Fine-tuning our "translations" to be more user-friendly
- Mobile compatibility (camera feature)
- Integrating an NLP to more reliably detect and translate ingredients

## Links!
- [Github](https://github.com/in-english-please)
- [Demo](https://in-english-please.github.io/frontend/)
- [Figma 1](https://www.figma.com/file/HJ1p71epfmCv8WA5R6ozr3/hack-western-team-library?type=design&node-id=0%3A1&mode=design&t=qx5qz6RQFlAjAEsP-1)
- [Figma 2](https://www.figma.com/file/H3SR4gXwf6YaXvQcBZGQq6/Untitled?type=design&node-id=0%3A1&mode=design&t=Q2PcYyRckppuXykY-1)

## Built With
- express.js
- google-cloud
- node.js
- react
- typescript

[Check out our project on Devpost!](https://devpost.com/software/in-english-please)


For students, by students.

Looking for Feedback

Introducing devCircle!

This is my first post! Introducing In English Please!

Trending Tags

Top Tech