MongoDB Atlas Hackathon 2022 on DEV
Tags: atlashackathon22, mongodb, python, javascript
Published: 2022-12-08 23:29:30

## What We built
Hello and welcome to our project for this hackathon! Our project is called FastPanel, and it is a Django inspired admin panel for FARM stack.

It is highly customizable and fully integratable with any project that uses FARM stack as its core.

For Demonstrating FastPanel, we have created a wrapper project on top of it, called **DevDuels** - A real-time multiplayer coding battleground!

### Category Submission:
About Real-time

### Screenshots
FastPanel app page
![FastPanel App Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sluu8ldqq9c3hfygh97v.png)
FastPanel app models page
![FastPanel App Models Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w22yyt58yoo5wcf3hfwp.png)
FastPanel list document
![FastPanel list document](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mugn8skdttabcpf27zjy.png)
FastPanel create a new document
![FastPanel create a new document](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b94m60keuvjyqpubinri.png)
FastPanel update a document
![FastPanel update a document](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pntbv8c6tbfc3vbs03kt.png)
FasPanel Delete a document
![FasPanel Delete a document](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4bcxxb48jnn01c7ltdyu.png)
FastPanel Profile Page
![FastPanel Profile Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ogf6bk3rjqoo4zed489d.png)
* * *
DevDuels

DevDuels user registration
![DevDuels User Registration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nbjfeoolcvj9haaloldl.png)
DevDuels create event
![DevDuels create event](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rzp443slqtmx03yunxjw.png)
DevDuels join a event
![DevDuels join a event](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ornnsqe16cbodv0r77aw.png)
DevDuels event info
![DevDuels event info](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ziz54pbaag95cw7gtsop.png)
DevDuels coding ground
![DevDuels coding ground](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ib8rgrmj9ajdrpccn4vm.png)
DevDuels scoreboard
![DevDuels scoreboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/99hpexsr1paq017qhu1l.png)

### Description
FastPanel is a library built using, **preact**, **FastAPI**, and **MongoDB**. It has a seamless integration with any FARM stack project, to demonstrate FastPanel we have created a wrapper project on top of it, which is called, **DevDuels**, As the name suggests this is a simple platform where dev's can compete with each other, in a coding battleground.

DevDuels uses, `changeStreams` to send real-time database updates to the its frontend client which is built using react.

#### Tech-Stack's used
1. FastPanel
   - MongoDB as its primary DB
   - FastAPI as the core backend framework, to create APIs
   - pReact as the frontend client, to consume the APIs

2. DevDuels
   - MongoDB as its primary DB
   - MongoDB change streams to send real-time updates to the backend server
   - FastAPI as the core backend framework, to create APIs
   - React as the frontend client, to consume the APIs

#### Application Structure

![FastPanel & DevDuels arch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3k45ohs9gxytgk3hjfcq.jpg)

### Link to Source Code
{% github https://github.com/ankit-brijwasi/fastPanel %}
{% github https://github.com/ankit-brijwasi/devduels-frontend %}
{% github https://github.com/navdeepm20/fast-pannel %}

### Permissive License
MIT License

## Background
As more and more people are using microservice architecture in their projects, the demand for NoSQL databases like MongoDB is increasing at an astounding rate, but the old and matured frameworks like Django don't have a built-in support for them, and needs manual configuration!

As a result, nowadays frameworks like FastAPI are becoming more and more popular, Which is good, but there are some parts of Django which are super helpful for developers, like its built-in Admin Panel, which is customizable down to its core!

Taking an inspiration from this, me and my friend @navdeepm20 , decided that, we'll be building a new admin panel, which can support the new and modern frameworks and databases, like FastAPI & MongoDB.

### How we built it
While building the application, We learned a lot about mongodb, things like, `changestreams`, indexes, relationships, and etc.

The most fascinating feature for me personally was the `changesteams`, and I realized just how useful mongodb is, in a microservice architecture.

Overall, It was a very fun experience working with mongodb and its python connector `motor`

### Additional Resources/Info
Google, Stackoverflow, github issues, mongodb docs, fastapi docs, mui docs, and pReact docs!

### Contributors
{% user ankitbrijwasi %}
{% user navdeepm20 %}