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 and MongoDB developers

FastPanel: The Modern Admin Panel for FastAPI and MongoDB Developers

Meet FastPanel – the new-age dashboard crafted for developers using FastAPI and MongoDB, with a user-friendly interface powered by pReact.

FastPanel steps up as the modern twist on the classic Django admin panel. It's tailored for folks diving into FastAPI and MongoDB, offering a smooth experience for managing your projects.

Think of it as your go-to tool for streamlining your work, letting you focus on what really counts – creating awesome apps.

So, get ready to explore the future of admin panels with FastPanel.

Build and install the FastPanel library

• Build the library using-

$ python setup.py sdist

• Install the library

$ pip install dist/fastpanel-1.x.x.tar.gz

FYI: pip version will be released soon!😉😁

Configure FastPanel into your application

1. Create the fastpanel.yaml configuration file, here's the general format for that-

secret_key: <MY SECRET KEY> # enter the secret key for your

…

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 Projects to scale without thinking about an admin pannel. This project is combination of two modules the frontend and the backend and support project with MongoDb as the primary database. The backend project can be found here 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 🔥