DreamLogger is a showcase of my expertise in full-stack web development, featuring a captivating Next.js front-end enriched with TypeScript, SASS, TailwindCSS, and UI libraries. The application's robust back-end utilizes Prisma for efficient database queries, Next-Auth for secure user authentication, and leverages AWS components like S3, CloudFront, and Route53 for scalability. The meticulous design process, initiated in Figma, resulted in a seamless user experience, ensuring dream enthusiasts can effortlessly log, categorize, and share their dreams while exploring personalized features like the Dream Calendar, custom tags, and character tracking. DreamLogger represents not just a web application, but a fusion of innovative technologies and thoughtful design, encapsulating the potential of modern web development.
the back-end
The backend of DreamLogger is a robust architecture carefully designed to ensure scalability, security, and seamless functionality.
Next.js and Prisma
The backbone of the backend is built on Next.js, a versatile React framework that enables server-side rendering, routing, and efficient development. Prisma, a powerful database toolkit, handles database queries efficiently with a type-safe approach, ensuring data integrity and minimizing errors.
Route handling in DreamLogger is implemented using Next.js Route Handlers, enabling efficient request handling and allowing for the creation of dynamic routes that seamlessly integrate with the frontend.
PostgreSQL
DreamLogger utilizes a PostgreSQL database to manage the related nature of the data, offering a reliable and scalable solution for storing user information, dream logs, and associated metadata.
AWS Integration
DreamLogger integrates AWS services to enhance performance and reliability:
Amazon Simple Storage Service (S3) is employed to store and retrieve static assets, ensuring efficient data storage and retrieval.
Amazon CloudFront is used as a content delivery network (CDN) to accelerate the distribution of static and dynamic web content, improving the overall speed and responsiveness of the application.
AWS Route53 handles DNS management, providing a scalable and highly available Domain Name System (DNS) web service for routing end-user requests to the appropriate resources.
Authentication and Authorization
Authentication is achieved through Next-Auth, a secure and versatile authentication library for Next.js applications. DreamLogger leverages Google's OAuth provider to ensure a secure and streamlined authentication process. Authorization levels are implemented to manage access to various features and functionalities, ensuring that user data is accessed only by authorized individuals.
Encryption and Data Security
Ensuring the security of user data is a top priority for DreamLogger. Several measures are in place:
HTTPS: The entire application is served over HTTPS to encrypt data in transit, preventing unauthorized access during communication between the user's browser and the server.
Password Hashing: User passwords are hashed before storage, employing industry-standard hashing algorithms to protect sensitive information.
Secure Cookies: Secure cookies are used to manage user sessions securely, preventing unauthorized access to sensitive data.
Client-Side Encryption: Additional layers of security are implemented through client-side encryption, enhancing the protection of user data.
the front-end
DreamLogger's front-end is meticulously crafted to deliver a captivating and user-friendly interface, incorporating various technologies to ensure responsiveness, state management, and efficient data fetching and mutation.
Next.js with TypeScript
The front-end is built using Next.js, taking advantage of its powerful features like server-side rendering, automatic code splitting, and seamless integration with TypeScript. TypeScript adds a layer of static typing for enhanced development and codebase robustness.
SWR (Stale-While-Revalidate)
DreamLogger leverages SWR, a React Hooks library for remote data fetching, to optimize the user experience. SWR allows for the seamless integration of data from the server while providing a responsive and reactive interface.
Custom Global Application State Handling
To manage global application state, DreamLogger employs React Contexts. This custom state management solution ensures a centralized and efficient approach to handling shared state across various components, promoting maintainability and scalability.
Custom Components and NextUI
DreamLogger's user interface is enriched by custom components, tailored to the application's unique design. These components are built upon NextUI, a UI library that provides a set of React components with a clean and modern design. This ensures a consistent and visually appealing look and feel across the application.
Custom API Handlers with Axios
API handling in DreamLogger is streamlined through custom handlers built upon Axios, a popular HTTP client for the browser and Node.js. This ensures efficient communication between the front-end and back-end, with the ability to manage API requests and responses seamlessly.
Figma for Design and Prototyping
Before translating the design into code, DreamLogger's user interface is designed and prototyped using Figma. Figma allows for collaborative design, ensuring that the final product aligns with the initial vision and user experience goals.
