Pencilooza is a pencil-themed mock application management web app. Users can submit 'manufacturer' applications which are then managed by the administrator. Once an application is submitted, only the administrator can review (accept or reject), create, delete, and update the data. Completing this project allowed me to integrate and explore essential web development concepts.
- Problem: Restrict operation execution by requiring an admin password.
- Solution:
- Define a route to accept the authorization POST request.
- Create middleware
- Sanitize the user input.
- Accept an `adminPassword` and `adminCommand`.
- Define a collection of key-value pairs where the key represents the restricted `adminCommand`, and the value is a function that executes if the authorization passes (handles the request).
- Compare the user input to the admin password (stored in an environment variable).
- If the input is valid then retrieve and execute the function in the previously defined collection of key value pairs using the adminCommand as the key.
- Assign the middleware to handle POST requests sent to the route defined in step 1.
- Create a form with an input to accept the password and a hidden field containing the restricted adminCommand which handles the request.
- Use AJAX to:
- send a POST request to the route defined in step one containing the provided password and requested admin command.
- Handle the fetch response from the server by updating the user interface or redirecting to a new page.
- Problem: Update the client-facing user interface based on server-sided validation results.
- Solution:
- Create your template with fields that have unique ids for targeting.
- Create a client side script to use these unique ids to select and update the form fields.
- POST the form data to the server for validation and parsing.
- Validate the input and parse the errors to connect a field selector (the unique id created for targeting in step 1) to the error message.
- Pass the parsed validation errors to the client-side script created in step 2 by using one of the following methods:
- Pass the errors to the template directly through res.render and embed the errors in a hidden element for the client side scripts to handle.
- Use AJAX to send the data to the validation endpoint with a fetch POST request and await the response. Use the response to either update the UI by calling the client side script directly, or pass the data to a redirected route by creating a form, injecting the data into inputs and posting the data to the redirect route
Express/Node
-
Routing: Gained a deeper understanding of routing and how data flows between server and client.
-
Centralized Route Authorization: Implemented centralized route authorization by requiring an administrator password to execute certain operations.
-
Form Sanitization and Validation: Used the
express-validatorlibrary to sanitize and validate user input. -
AJAX: Implemented AJAX principles to exchange data between the server and client.
Libraries
- compression: Reduces the size of served content, which improves load time and resource usage.
- helmet: Provides security by setting various HTTP headers.
- debug: Allows console logging based on node environment and namespaces.
- express-rate-limit: Configurable client request restrictions.
- morgan: HTTP request logger middleware.
- dotenv: Loads environment variables from .env file into process.env.
MongoDB/Mongoose
- Configuration: Configured and deployed a Mongo MongoDB database using the Mongoose library.
- Asynchronous Queries and Error Handling: Gained practical knowledge in handling asynchronous database queries, managing errors and exceptions, and general Mongoose usage.
- Population Script: Created a script to populate the database with structured default data.
- Aggregation Framework: Utilized MongoDB's aggregation framework to query specific data of documents.
Model-View-Controller (MVC) Architecture
- Model: Manages data schema properties.
- View: Provides templates rendered using model data.
- Controller: Interfaces between model and view, handling input/requests to retrieve data from the model and render views.
Pug
- Worked with the Pug template engine to render dynamic webpages.
- Created reuseable Mixins to streamline and normalize HTML element creation.
- Learned how to decouple and refactor inline-javascript from templates to improve security, code modularity, and project organization.
- Learned about Interpolation and how it can be used to access server-side data directly in client-side inline-JavaScript.
Other
- Created a UML Class diagram using plantUML to plan the general structure of the document Models.
- Complete Item implementation.
- Clean up and polish the user interface.
- Improve and modularize CSS.
- Implement more account types.
- Restructure project files.
Core
Libraries
- debug: Provides console debugging based on application environment and namespaces.
- dotenv: Loads environment variables from .env* file(s) into process.env.
- express-application-generator: Generates file structure and boilerplate for an Express application.
- cookie-parser: Parses cookie headers and populates the req.cookies with an object keyed by the cookie names.
- morgan: HTTP request logger.
- http-errors: Used to create HTTP errors for node web applications.
- helmet: Helps secure Express applications by setting HTTP response headers.
- compression: Compresses request response bodies
- express-async-handler: Handles exceptions for asynchronous express route handlers.
- express-rate-limit: Limits repeated requests to public APIs and/or endpoints.
- express-validator: Wraps validator.js to provide validation and sanitization of express requests.
Development and Deployment
- PlantUML: Diagram tool.
- MongoDB Atlas: Cloud database service that automates deployment, scaling, and management of MongoDB clusters.
- Railway: Full stack infrastructure as a service provider.
- ESLint: Static JavaScript code analyzer.
- ESLint Config Standard: Enforces JavaScript Standard Style code syntax rules through ESLint.
- ESLint Config Prettier: Turns off conflicting and/or unnecessary ESLint rules for Prettier.
- Prettier: Code formatter to enforce consistency.
- GitHub: Remote repository hosting.
- Git: Version control and source code management.
MIT
Copyright © 2024-2025 Nolan Gajdascz | GitHub