Quest Log is a web application that leverages Google OAuth for user authentication. The application enables users to create and manage session notes, recaps, and any other information they need to store for our ongoing Dungeons and Dragons campaign.
Link to website: Quest Log
Tech Used: MongoDB, Mongoose, Express.js, Handlebars, Node.js, HTML5, CSS3, and JavaScript
This project utilizes a combination of technologies to create a dynamic and interactive website. Here's a breakdown of the tech stack and their respective roles:
- HTML5: Provides the structural elements and content for the website.
- CSS3: Handles the styling and layout of the website, ensuring an aesthetically pleasing design.
- JavaScript: Implements interactive features like the navigation bar and form validation, enhancing user experience.
- MongoDB and Mongoose: Enables the storage of documents, collections, and user data in a structured manner.
- Node.js and Express.js: Hosts the server to handle HTTP requests and responses.
- Handlebars: Serves as the template engine, facilitating the creation of dynamic web pages.
To ensure a seamless user experience across devices, a responsive design approach was adopted, guaranteeing that the website looks great on all screen sizes.
Here are some ways that I could increase performance on my website:
These are some popular methods of optimization that I am considering:
- Database Indexing: Analyze the database queries and identify frequently accessed fields or columns. Implement appropriate indexes on these fields to improve query performance.- Optimized all images by reducing their file size and using correct image formats
- Caching: Utilize caching mechanisms, such as Redis or Memcached, to store frequently accessed data in memory. This can reduce the load on the database and improve response times.
- Asset Bundling: Consider bundling your static assets (CSS, JavaScript) into a single file to reduce the number of HTTP requests required to load the page. This can enhance performance, particularly for larger projects with multiple assets.
- Lazy Loading: Implement lazy loading techniques for images and other non-critical assets. This way, they will only be loaded when they come into the viewport, improving initial page load times.
- Code Optimization: Review your codebase for potential performance bottlenecks, such as inefficient algorithms or unnecessary iterations. Optimize these areas to improve the overall efficiency of your application.
- GZIP Compression: Configure your server to enable GZIP compression for responses. This reduces the size of data sent over the network, resulting in faster page loading times.
- CDN Usage: Leverage content delivery networks (CDNs) to serve static assets from geographically distributed servers. This can reduce latency and improve the loading speed of your website.
- Database Query Optimization: Optimize your database queries by ensuring they are properly indexed, avoiding unnecessary joins, and utilizing query optimization techniques specific to your database technology.
- Browser Caching: Configure appropriate caching headers for static assets, allowing browsers to cache them locally. This reduces the need for repeated requests, improving performance for returning visitors.
Quest Log is still a work in progress and will be optimized before I consider it complete. This is a minimum viable product at the moment.
This is the first application that I have written that uses authentication. I have learned a considerable amount creating this project so far.
- I used Mongoose and Handlebars for the first time. This really has made a huge difference in how I will create full-stack applications in the future.
- This is one of the first real MVC applications I have written and the MVC paradigm makes all the difference when it comes to project organization.
- The importance of performance optimization and website accessibility
- The importance of testing and debugging in the development process
- The significance of keeping up with the latest web development technologies and trends
- The benefit of using version control with Git and hosting the code on Github