Smart-Book

Inspiration

Many gradebook systems provide insignificant detail to assignments, making it difficult for teachers to judge the direction and effectiveness of their assignments. To respond to this problem, we created SmartBook, a system that allows such insights to be made. Utilizing several graphing utilities, and innovative styling, we were able to create an intuitive interface - one that all teachers and students should be able to operate with ease.

What it does

Our app contains two parts. Our frontend (powered by Vercel) and a server. We incorporate several key features such as OAuth2 Authentication protocols, dynamic loading classes, weighted grade calculations, server-side-rendering, and much more. Our gradebook allows students to view their grades in a clean, graphical manner which allows them greater insight into their past and future progress. Through clean and easy-to-understand grade and weighting coloring, teachers (and students) are able to more quickly glance through their grades without sacrificing huge amounts of time checking each individual grade.

How I built it

Our frontend was built using Next.js, using several graphical packages, components by ChakraUI, styled with TailwindCSS. We used dynamic routing in order to generate intuitive URLs and to provide easier SSR features. We were able to deploy it using Vercel. Our backend was built with Node.js, using PostMan to test and debug the routes and servers.

Challenges I ran into

We initially ran into the issue of authentication and working with cross-origin requests, which we were able to solve through using the libraries next-auth and cors. Furthermore, we faced the obstacle of integrating such a backend and frontend. Luckily, we were able to solve this using the Axios and javascript fetch APIs.

Accomplishments that I'm proud of

We are proud that we were able to get a finished product, and that all the routes behaved exactly as expected. Integrated such industry-standard technologies were very exciting too, as Next.js, React, Node.js, and Vercel was very hard to integrate together in such a project in such a short amount of time (these seem more large-scale than "hacky"). We were also proud of having a working database that updates, adds, and deletes items using standard API protocols.

What I learned

We learned the tools of Next.js, Vercel, and TailwindCSS in a very short amount of time (oftentimes our web developer was seen watching Next.js and such tutorials during the hackathon). We learned how to use node and MongoDB for our database.

What's next for Smart-Book

Shareable classroom URLs (similar to Google Classroom). More options for statistics. More intuitive UI. Live collaboration. Teacher collaboration. Seamless integration with frontend.

Notes

On the links below, only the first link leads to the website. The second link is that URL to the server and can only handle post requests/get requests.

Built With

• express.js
• mongodb
• next.js
• node.js
• react.js
• tailwindcss