The goal of this application is to provide businesses with an easy to use web application where management can provide business reports for executives and online training material for their employees.
Click here for the live demo. (The application will take a few seconds to start from sleep, as the back end is hosted on Heroku.)
The repository for the back-end can be found here.
This full-stack NextJS application is a demo of an application that was built to allow small businesses to create educational material, reports and to share sensitive information among the management team.
Strapi, an open-source headless Content Management System, was chosen to build the RESTful API to handle routing and authentication. Image files are hosted on Cloudinary.
The administration panel, users and user content is handled within the Strapi back-end. The application contains authentication, pagination and search functionality.
NextJS allows the JSON Webtoken to be stored server side, which is a great feature and negates the typical security risks (such as cross site scripting attacks) when the Webtoken is stored client side.
Strapi is a community built, open source headless Content Management System. In order to avoid sending authentication requests from our front end client to the backend, Strapi allows for routes to built within it. These API routes run serverside. Once accessed these routes send the request to Strapi and save the JSON Web token in an HTTP only cookie. Thus, the JSON Web Token can never be accessed on the client / browser side by JavaScript.
Visitors to the website can only access public articles. Once a user is authenticated, they will be granted access to their own personal dashboard where they can access private managerial reports. These reports are private and only available to authenticated users.
The front-end is written in TypeScript and built with the NextJS framework and React functional components.
Tailwind CCS was combined with Styled-Components. Every React functional component has its own separate styled-component tailwind file. This allows extremely fast ui changes without compromising code quality. Tailwind was chosen due to its ease of use and its effectiveness in providing a mobile first design that can be easily adjusted for wide screen monitors.
React-Toastify is used to display form validation errors.
In order to display Markdown (markdown content is provided by users using the rich-text editor), Tailwind typography and React Markdown were implemented.
The backend is written in TypeScript and built with Strapi, an open-source NodeJS framework.
For authorization, Strapi utilizes an ACL strategy for protection. The ACL strategy manages the permissions between groups of users. Everytime an API request is sent, it will check if the Authorization header is present. If it is, it will obtain the JWT token, which contains the User ID and it will verify whether or not the user making the request has access to the resource.
The SAAS product Cloudinary was chosen to host image files. When an image file is uploaded to Cloudinary, it creates multiple image sizes which help to improve SEO. The back end is hosted on Heroku which does not provide local file storage, thus, Cloudinary is used for storage.
SQLite was used for the development database and PostgreSQL was chosen for the production database.
