The goal of this NextJS application was to create a solution who'd offer an intuitive UI for teachers to quickly enter the presences of the students of a certaiin lecture without needing much time for that (or sending a report to the office).

As a first step, I was planning to add authentication using firebase, but after some Issues getting started I decided to switch to it's open open source alternative:  

In the end I was so happy with it, that currently I am using it as a datastore (a PostgreSQL database) and for authentication.

But more about the actual web application - currently (June 2021) it's still a bit work in progress (I'd like to convert it to a SaaS with a stripe integration) 

The the following features have been implemented so far:

: New Users without an invite will be prompted to create a new organisation and Administrator can invite new users to their Organization by adding their email

: Users can update their own profile, providing a name and surname

: Administrators can add, delete, update students (or import them by using an Excel file 

: Administrators can create courses, add Student to it and schedule Lectures

: Teachers can easily add the students presences per lecture with only a few clicks, add notes to a certain student or to the full lecture

Currently there's two reports in place for the back office: Reports per course or a report per student

Screenshots of the features can be seen below

The multi-tenancy feature has been implemented only by using supabase' (or PostgreSQL) 

 has been used to assemble the react-based UI

I am still in the buiding phase, so if you want to try it out - Feel free to get in touch to test out 

The goal of this NextJS application was to create a solution who'd offer an intuitive UI for teachers to quickly enter the presences of the students of a certaiin lecture without needing much time for that (or sending a report to the office)

presenz.io

This project has been one of the first complete 

 app that I have written from scratch. The idea behind it was to analyze Pictures and generate a 

 from it and what's better than building palettes for football clubs. Live Demo should be available at: 

The idea of using a backend is, that users can add or suggest new clubs - and the an administrator can just check and confirm them

https://github.com/pichichi91/color-picker

Users can add a link to an image and the App will load that image, place it on a canvas a loop over every Pixel to calculate the Colorcode for every pixel

The percentage per Color will be calculated (ignoring transparent colors)

Calculation of bright/dark colors for styling

Copy the hexadecimal color code to clipboard

Users can request that the searched club will be added to the Backend

Querying Contentful CMS for a list of saved color palettes

Toast will be displayed on certain actions, to provide feedback for the user: 

https://www.npmjs.com/package/react-toastify

State of - March 2021 - Version 1.0 there's still a few things that could be improved:

Drag/Drop for Images: Currently only pasting of URLs is supported and if the website of the desired URL does not support the correct 

Improve Performance: Currently, loading an URL in firefox will make the browser unresponsive (because the looping over every Pixel seems to be needing to many computing resources)

Add Search for clubs: As soon as more clubs will be added, a search field might be feasible

Adding quantize of the colors - otherwise on bad quality pictures too many different color codes will be displayed

 from it and what's better than building palettes for football clubs.

color-picker

This is a Create React App - most data is stored on a backend on sanity.io and queried over GraphQL. In a first version the only goal was to be able to display profiles of football 

The UI has been been inspired a bit on Spotify - and has been implemented only with styled-components without any other styling framework

https://github.com/pichichi91/futbol-dashboard

futbol-dashboard

Screenshots

More Stories

presenz.io

color-picker