I'm venturing into the world of freelancing for the first time, and excited to launch my new project! It's an organizational profile website with a powerful backend allowing the client to manage and update all content easily. I'm confident that this website will help me establish a solid online presence and connect with potential clients.

I'm utilizing a powerful technology stack that includes React, NodeJS, and PostgreSQL, complemented by the Keystone 6, a headless CMS framework, to ensure seamless project development.

This project has several stages. The project's first stage commenced on June 12, 2023, and was successfully completed within two weeks, concluding on June 26, 2023. I've created a website that includes a backend capability for managing content. Moving forward, the client plans to develop an app for members of the organization in Q4. The timeline for this next stage will depend on our client's needs.

Project Goal

Here are the goals from the client:

• ✨ Creating a professional and organized website that represents our organization effectively.
• ✨Building a robust backend infrastructure for efficient content management and seamless administration.
• ✨ Providing customization and flexibility on both the front-end and backend, allowing us to tailor the website to our specific needs.
• ✨ Ensuring scalability and future extensibility, especially for the development of a User Portal in the later stages.

To meet the client's requirements, the initial thought was to use WordPress, a popular content management system known for its ease of use and extensive plugin ecosystem. However, considering the client's request for custom pages, the need for flexibility, and future plans, I decided to utilize NodeJS for the backend development.

By choosing NodeJS, I aim to create a scalable and efficient backend infrastructure that can handle the dynamic content management needs of the blog. NodeJS is well-suited for building fast, scalable network applications and offers a non-blocking, event-driven architecture, which can greatly enhance the application's performance.

Project Solution

Project Architecture

Now let's talk briefly about the architecture and how the different components interact and function together. The primary client is a React-based web application that serves the website and interacts with the backend to retrieve data. Additionally, we have an admin user interface (UI) powered by Keystone 6 UI, providing administrative functionality.

The backend plays a crucial role in our architecture. Upon receiving requests, it performs authentication checks to ensure that only authorized users can access the protected resources. Keystone JS, a powerful framework, assists us in managing these requests through its CRUD API. This API enables automated Create, Read, Update, and Delete operations on our data models, significantly simplifying the development process.

To facilitate object-relational mapping (ORM), we rely on Prisma, an integral part of the Keystone JS app. Prisma allows us to work with our data models using a type-safe and database-agnostic approach, enhancing productivity and code quality.

As for the database, we have chosen PostgreSQL as our preferred option. It provides a robust and scalable foundation for storing and managing our application's data. To ensure optimal performance and availability, we have deployed our PostgreSQL database on fly.io, a cloud hosting platform.

By leveraging the React app, Keystone 6 UI, Keystone JS CRUD API, Prisma, PostgreSQL, and fly.io, our project architecture is designed to provide a seamless experience for our website visitors and an intuitive administrative interface for managing the application's data.

Frontend Development

For the front-end design, the client requested a simple and straightforward website while also being mobile responsive. After presenting them with multiple layout options, they ultimately agreed to proceed with the chosen design.

React was chosen as the primary framework to develop the blog's front end. Given the project timeline, the decision was made to develop the React application using JavaScript instead of TypeScript. While TypeScript offers stronger static typing and can enhance code quality, opting for JavaScript allowed for faster development and ensured timely delivery.

The CSS framework, Tailwind CSS, was employed to streamline the styling process and achieve a responsive design. Tailwind CSS provides a utility-first approach, enabling developers to rapidly build and customize UI components without the need for writing extensive CSS styles from scratch. This choice allowed for efficient development and a visually appealing front-end experience.

Backend Development

Keystone 6, a headless CMS, was selected as the preferred solution for the backend. Keystone 6 offers extensive flexibility and functionality, making it ideal for managing the blog's content. Although it required learning the Keystone 6 API from scratch, utilizing this CMS saved significant time compared to developing a custom CMS specifically for this project.

Keystone 6 provides an intuitive interface for content management, allowing administrators to easily create, edit, and publish blog posts, pages, and other content elements. It also offers various features such as user authentication and permissions, search functionality, and database management, which enhance the overall functionality of the blog. In addition, it uses TypeScript!

By leveraging Keystone 6 as the backend solution, I can focus on building customized features and tailoring the CMS to meet the specific needs of the blog. This approach enables efficient content management and ensures a smooth and streamlined workflow for administrators and end users.

Summary

The blog is now live and accessible at https://pogisumsel.com. The client's satisfaction with the final outcome reflects the project's success, and it has proven to be an invaluable experience for me in the realm of web development. This endeavor allowed me to navigate and thrive within a tight schedule, further enhancing my expertise in efficiently delivering high-quality solutions.