DEVCODE - Grow, Share and Connect with Developers. MongoDB Hackathon Submission On Dev
Tags: atlashackathon22, webdev, javascript, mongodb
Published: 2022-12-07 13:57:04

## What we built

Have you ever faced the difficulty to find collaborators on an awesome open-source project you built? Have you ever lacked funds for your project? Did you want to work on an open-source project but can't find the right one?

We have got you covered. We built a project called "DEVCODE - Grow, Share and Connect with Developers."

### Category Submission:

Choose Your Own Adventure

### Team

This was a team project made by @devarshishimpi and @abhinandan__wadhwa 

### App Link

https://devcode.stonecss.com/

### Screenshots

> DEVCODE Landing Page

![devcodelandingpage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/146ctzc2qmfv0wjirus9.png)

> Adding A New Project

![devcodeaddnewproj](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/olbhczj230jol38z26ev.png)

> User Submitted Projects with Analytics


![devcodesubmittedprojects](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/evlsuynr6chlnsqx8sv7.png)



> Filter different Projects for contributing

![devcodefilter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/54d6idk55tk9pykq3kl1.png)

> Like A Project You find Useful

![devcodelike](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qm29vsttgv300jewt8ny.png)

> Viewing Publicly Submitted Projects

![devcodepublic](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dazhhuwhgyne6jrd0qnv.png)

> Mobile Friendly Design

![devcodemobile](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ao31jskut3ayr8trj16f.png)

> MongoDB Atlas Dashboard

![devcodeatlasdashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rn1d1wyc7dc7z5es5u89.png)

> Using MongoDB Atlas as Database Solution

![devcodemongodbatlas](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mt4sern0wl557yxbxkyh.png)

### Video

**Note: There were few selective features which were implemented after making the Video, so they won't be present in the Demo.**

{% youtube D9sHbRg8fQU&t=1s %}

### Description

A collaborative open source environment for developers to share their projects and contribute to many more.

### Link to Source Code

https://github.com/dvstechlabs/devcode

### Permissive License

MIT License

## Background

While thinking for ideas, we noticed that few open-source projects made in the past by us and everyone have one difficulty, and that is to find collaborators for the project. Making people engage in the project. We decided to make this platform only for open-source projects which are non-paid work, or rather volunteering since we didn't want to make this a work-finding platform. Then further, we realized that as contributors too it's hard finding for great projects so we made that people can contribute to projects sorted by Difficulty and Languages and tools used in it. 

### How we built it

We used the well known MERN Stack for this project. We made use of Tailwind CSS due to it's simplicity and great design for the frontend. We used MongoDB Atlas as solution for Database. Along the way, we learnt how to implement image upload feature in Cloudinary along with MongoDB Database.

## Tech Stack

- Frontend - React
- Backend - Nodejs
- Database - MongoDB Atlas
- Framework - Tailwind CSS
- Image Hosting - [Cloudinary](https://cloudinary.com/)

### Additional Resources/Info

- [Insert Array Inside an Object in MongoDB](https://www.baeldung.com/java-mongodb-document-insert-array)
- [Query an Array](https://www.mongodb.com/docs/manual/tutorial/query-arrays/)
- [Upload API reference](https://cloudinary.com/documentation/image_upload_api_reference)
- [Image transformations](https://cloudinary.com/documentation/image_transformations)

### What's next to DEVCODE???

1. Adding "Edit" and "Delete" functionality to the project for users to change their already submitted project.
2. Building the real-time collaboration system with Socket.io
3. Funding options for the projects.
4. Building A Profile Dashboard for users to edit their profile and giving more control over what they can change.
5. Adding The Functionality to Comment the submitted projects.

## Thanks For Reading Till Here!!!

Thanks to @mongodb_staff and @thepracticaldev for this amazing opportunity!!