MongoDB Atlas Hackathon 2022 on DEV

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 models page

FastPanel list document

FastPanel create a new document

FastPanel update a document

FasPanel Delete a document

FastPanel Profile Page

---

DevDuels

DevDuels user registration

DevDuels create event

DevDuels join a event

DevDuels event info

DevDuels coding ground

DevDuels scoreboard

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

Link to Source Code

ankit-brijwasi / fastPanel

A Django inspired admin panel for FastAPI developers

fastPanel

A Django inspired admin panel for FARM stack developers, to make there development life easy!

System requirements

Due to the limited support of the uvloop package in windows, the server might not start, to fix this, use the server in WSL

Default User

For now, user registration is off, A fastpanel user can only be added via the admin panel itself, and to do that use-

username	tester
password	TestUser123

Run the server

1. Activate your virtualenv
2. Install all the dependencies using, pip install -r requirements.txt
3. Add a file called .env in the root with the following data

DB_HOST=dev-cluster.xxq5ptb.mongodb.net
DB_USER=dev
DB_PASSWORD=C0mtGefNUcTwDPkf
DB_NAME=devduels

4. Run the server using-

$ uvicorn main:app --host 0.0.0.0 --port 8000 --reload

View on GitHub

ankit-brijwasi / devduels-frontend

DevDuels

React frontend for connecting with the devduels backend

Run the server

1. Install all the dependencies using,

$ npm install

2. Run the server using,

$ npm start

View on GitHub

navdeepm20 / fast-pannel

This is the admin panel designed in Preact to be used with FastApi with its wrapper. This fulfills the need of a modern admin panel required for FastApi.

FastPanel

A modern admin panel that power up the FastApi with the help of it's wrapper https://github.com/ankit-brijwasi/fastPanel

Requirements

Major Dependencies

• Preact
• React Router Dom
• Material Ui
• For more refer to package.json.

Project Information

CLI Commands

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# test the production build locally
npm run serve

# run tests with jest and enzyme
npm run test

For detailed explanation on how things work, checkout the CLI Readme.

View on GitHub

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

ankit-brijwasiFollow

Backend developer at Neurobit Innovations, India who loves to create inspiring #code and cool shortcuts. Python and JS ❤.

Navdeep MishraFollow

💻 Software Engineer | #️⃣ Full Stack | 😎Tech Enthusiast | ❤️ Music 🔥