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
-
FastPanel
- MongoDB as its primary DB
- FastAPI as the core backend framework, to create APIs
- pReact as the frontend client, to consume the APIs
-
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
- Activate your virtualenv
- Install all the dependencies using,
pip install -r requirements.txt - Add a file called
.envin the root with the following data
DB_HOST=dev-cluster.xxq5ptb.mongodb.net
DB_USER=dev
DB_PASSWORD=C0mtGefNUcTwDPkf
DB_NAME=devduels
- Run the server using-
$ uvicorn main:app --host 0.0.0.0 --port 8000 --reload
DevDuels
React frontend for connecting with the devduels backend
Run the server
- Install all the dependencies using,
$ npm install
- Run the server using,
$ npm start
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.
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
Top comments (0)