Overview
Agenda is one of the previous companies I've worked for and my favorite one.
In 2022, I was still a self-taught developer. In order to practise how to build a website with NextJS and TailwindCSS, I decided to launch a mini-project and strengthen my skillsets by revamping their exsiting website.
To handle loads of contents in a more organised way, I picked a headless CMS service called Sanity as the content backbone of this website.
Tech stacks
NextJS, TailwindCSS, Sanity
Task
Started from stretch, re-design and build a website for the marketing agency called Agenda
User stories
- User should be able to see a list of projects that Agenda has worked on
- User should be able to browse the details of each project
- User should be able to check the constant updates from Agenda
- User should be able to understand who's in the team
- Admin should be able to add, edit and delete contents
Challenge
Build a full stack website with CMS Building a full-stack website with a headless CMS was a new challenge for me, as I had never worked on a project with these technologies before. I had to learn how to set up the back-end infrastructure to integrate the CMS with the front-end, as well as how to handle and process the data in a secure and efficient way. Additionally, I had to ensure that the website was optimized for performance and scalability, which required me to carefully manage the server-side resources and the data flow between the front-end and back-end.
New to headless CMS Using a headless CMS like Sanity was a new experience for me, and it took some time for me to get used to the concept of separating the content management from the presentation layer. I had to learn how to structure the content models in a way that made sense for the website, and how to fetch and display the data in the front-end using the Sanity API. I also had to learn how to manage the data flow between the CMS and the front-end to ensure that the website was always up to date with the latest content.
From design to deployment One of the biggest challenges of this project was taking the website from the design phase all the way to deployment. I had to ensure that the website was responsive and optimized for different screen sizes, as well as ensuring that the website met the client's expectations in terms of design and functionality. Additionally, I had to ensure that the website was secure and optimized for performance, which required me to use best practices for front-end development and web design. Finally, I had to ensure that the website was deployed correctly and was accessible to users around the world. This involved using tools like Vercel to manage the hosting, caching, and content delivery of the website.
Approach
Starting with Design in Figma To kick off the project, I started by creating a design draft using Figma. I used this design as a starting point to plan out the layout, typography, and color scheme for the website. By starting with a clear design plan, I was able to create a consistent and cohesive look and feel throughout the website.
From simple to complicated To avoid getting overwhelmed by the complexity of the project, I started by building the basic features of the website first, for example, building the index page only, before moving on to more advanced features. By doing this, I was able to stay focused and avoid getting bogged down in the details.
Research before diving into coding Before diving into coding, I took the time to research the technologies and tools that I would be using for the project, especially Sanity. This allowed me to gain a better understanding of the best practices for using these tools and technologies, as well as any potential issues or pitfalls that I might encounter. By researching and planning ahead, I was able to avoid costly mistakes and ensure that the project progressed smoothly.
Break the project into managable tasks To ensure that the project stayed on track and on schedule, I broke the project down into smaller, more manageable tasks. This allowed me to prioritize and organize the work that needed to be done, and ensure that each task was completed on time and to a high standard. By breaking the project down into manageable tasks, I was able to stay focused and motivated, and avoid getting overwhelmed by the scope and complexity of the project.
Result
This project is nicely done within my expected timeframe. While I'm satisfied with the overall result of the project, there are still some improvements that can be made.
Improvements to be made One thing I could work on is improving the performance of the website by optimizing the images and the code. Additionally, I could add more tests to boost the test coverage so that I could maintain the codes more esaier in the future. I also noticed some minor bugs that I could fix to improve the user experience. Finally, I could add some more features to make the website even more useful for both users and administrators.
What I've learnt
Turning a design draft to a real website One of the most challenging parts of this project was turning the design draft into a functional website. I had to pay close attention to details such as font sizes, margins, and colors to ensure that the website matched the original design as closely as possible. I also had to make sure that the website was responsive and looked good on different screen sizes. Overall, this project taught me a lot about the importance of attention to detail in front-end development.
Power of headless CMS A headless CMS like Sanity was a powerful tool that allowed me to manage content in a more organized and efficient way. By separating the content from the presentation layer, I was able to focus on building a clean and responsive website while still being able to manage the content in a flexible and scalable way. I also appreciated the simplicity and ease of use of Sanity, which allowed me to create, edit, and delete content with ease.
SSG and SSR in NextJS This project allowed me to explore the different ways of rendering content in NextJS, including Static Site Generation (SSG) and Server-Side Rendering (SSR). I learned that SSG can be a powerful technique for generating fast and efficient websites, especially when combined with a headless CMS. On the other hand, SSR can be useful for websites that require more dynamic content or have more complex user interactions. By using a combination of both techniques, I was able to achieve a fast and responsive website with minimal server-side overhead.
Roles of a frontend developer Working on this project gave me a deeper understanding of the roles and responsibilities of a front-end developer. I learned that as a front-end developer, I need to be able to collaborate effectively with designers, back-end developers, and other stakeholders to build a website that meets the needs of the users. I also need to be able to write clean, modular, and maintainable code that is easy to debug and test. Finally, I need to be able to keep up with new technologies and best practices in order to stay current and deliver high-quality work.
