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

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

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

$ npm install

$ npm start

# 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

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 🔥