MongoDB Atlas Hackathon 2022 on DEV

F-Rec

Table of Contents

F-Rec

Table of Contents
What We built
Category Submission
App Link
Self host your app

Screenshots

Desktop
Mobile

Description
Link to Source Code
Permissive License
Background
How We built it
Addi…


This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Andrea Bellu

F-Rec

Table of Contents

  • F-Rec
    • Table of Contents
    • What We built
    • Category Submission
    • App Link
    • Self host your app
    • Screenshots
      • Desktop
      • Mobile
    • Description
    • Link to Source Code
    • Permissive License
    • Background
    • How We built it
    • Additional Resources/Info
    • Authors

What We built

Logo

A Python, Mongodb and Sveltekit project to register access to a door

Category Submission

Choose Your Own Adventure

App Link

Link to the webapp

Use the following credentials to login:

user: test

password: test

Self host your app

  • Create a MongoDB database named "db" with the following collections:
    • users
    • access_log
    • auth
  • cd to the frontend directory
  • Create a .env file in the frontend directory and add the following variables:
MONGODB_URI=your_mongodb_uri
ENV=production
JWT_SECRET=random_string

Replace your_mongodb_uri with the uri of your MongoDB database and random_string with a random string.

  • Add an admin to the database by inserting the following data
{
    "username": "admin",
    "salt": "salt",
    "hash": "hash"
}

Get the hash and salt values by running the following command:

npm run hash <password>
  • Now run the app with the following commands:
npm install
npm run build
npm run preview

Visit http://localhost:4173 to see the webapp

Screenshots

Desktop

fig. 1 - Login Page
Login
fig. 2 - Main Dashboard
MainDashboard
fig. 3 - User List
UserList
fig. 4 - Adding a user
AddUser

Mobile

fig. 5 - Dasboard Mobile view fig . 6 - User List Mobile View
MobileMainDashboard MobileUserList

Description

With this webapp you can view the list of users that have access to a door, add new users and delete them. You can also view the history of the access to the door that are recognized by face recognition.

Link to Source Code

https://github.com/andrebellu/f-rec

Permissive License

MIT License

Background

We thought about a project that could be useful in our daily life. We decided to create a webapp that could be used to register the access to a door. Maybe it could be useful in a school or in a company where you want to know who has access to a specific door and restrict the access to some people. Maybe you can use an arduino to open the door when the face is recognized or you can use a raspberry pi to do the same thing.

How We built it

We used python to make a script that uses the webcam that is connected to the computer to recognize the face of the user. If the face is recognized, the script sends the log to the MongoDB database. We used SvelteKit to create the webapp that uses the MongoDB database to show the list of users that have access to the door and the history of the accesses to the door. The people entered in the same day are counted and shown in the dashboard. The webapp is responsive and can be used on mobile devices. We used the following technologies:

  • MongoDB
  • Python
    • OpenCV
    • Face Recognition
    • pymongo
  • Sveltekit
    • TailwindCSS
    • jsonwebtoken

Additional Resources/Info

Stack overflow is a great resource to find solutions to problems that you have. We used it to find solutions to problems that we had. We also used the following resources:

Authors


This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Andrea Bellu


Print Share Comment Cite Upload Translate Updates
APA

Andrea Bellu | Sciencx (2022-12-08T22:57:45+00:00) MongoDB Atlas Hackathon 2022 on DEV. Retrieved from https://www.scien.cx/2022/12/08/mongodb-atlas-hackathon-2022-on-dev-4/

MLA
" » MongoDB Atlas Hackathon 2022 on DEV." Andrea Bellu | Sciencx - Thursday December 8, 2022, https://www.scien.cx/2022/12/08/mongodb-atlas-hackathon-2022-on-dev-4/
HARVARD
Andrea Bellu | Sciencx Thursday December 8, 2022 » MongoDB Atlas Hackathon 2022 on DEV., viewed ,<https://www.scien.cx/2022/12/08/mongodb-atlas-hackathon-2022-on-dev-4/>
VANCOUVER
Andrea Bellu | Sciencx - » MongoDB Atlas Hackathon 2022 on DEV. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/12/08/mongodb-atlas-hackathon-2022-on-dev-4/
CHICAGO
" » MongoDB Atlas Hackathon 2022 on DEV." Andrea Bellu | Sciencx - Accessed . https://www.scien.cx/2022/12/08/mongodb-atlas-hackathon-2022-on-dev-4/
IEEE
" » MongoDB Atlas Hackathon 2022 on DEV." Andrea Bellu | Sciencx [Online]. Available: https://www.scien.cx/2022/12/08/mongodb-atlas-hackathon-2022-on-dev-4/. [Accessed: ]
rf:citation
» MongoDB Atlas Hackathon 2022 on DEV | Andrea Bellu | Sciencx | https://www.scien.cx/2022/12/08/mongodb-atlas-hackathon-2022-on-dev-4/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.