Collecting Data Using NextJS Web Application: A Guide how I did it

As a web developer or entrepreneur, collecting data is an essential part of running any successful business or application. One of the most effective ways to collect data is by using custom forms on your NextJS web application. In this article, we will discuss how you can collect data using custom forms, as well as how to collect data for your quantitative questionnaire and display the output in your own diagrams.

Collecting Data Using Custom Forms

To collect data using custom forms on your NextJS web application, you need to create a set of custom forms with various fields for users to input their information.

Once users submit their form data, you can use an API endpoint to collect and store the data in a database such as MongoDB. From there, you can access and analyze the data using tools such as Mongoose, a MongoDB object modeling tool, or by directly querying the database.

Displaying Output in Your Own Diagrams

To display the output in your own diagrams, you can use a data visualization tool such as Chart.js to create custom charts and graphs by mapping over the user data. By visualizing your data in this way, you can gain insights into the patterns and trends within your data and communicate your findings to others in a clear and concise manner.

Conclusion

By using custom forms on your NextJS web application, you can easily collect data from your users and store it in a database for analysis. Additionally, by using survey tools for your quantitative questionnaires and data visualization tools to display your findings, you can gain valuable insights into your data and make informed decisions for your thesis.

Sustainable web development guide line

Stacks

NextJS: NextJS is a popular open-source framework built on top of Node.js, which is used for building React applications. It provides a set of features such as server-side rendering, automatic code splitting, and static site generation, which makes building and deploying React applications more efficient and faster.
mongoDB: MongoDB is a document-oriented NoSQL database, which stores data in JSON-like documents with dynamic schemas. It's a popular database used by many web applications and provides high scalability, flexibility, and performance for data storage and retrieval.
greenCSS: greenCSS is a lightweight CSS framework that provides a set of classes and utilities for building responsive and mobile-first web applications. It offers a minimalist design and has a small file size, which makes it easy to use and integrate into any project. It uses a similar syntax like tailwindCSS and was part of my capstone project.
Figma: Figma is a cloud-based design and collaboration tool that is used for creating user interfaces, prototypes, and vector graphics. It's a popular tool used by designers and developers to create high-fidelity designs and prototypes, and it provides a collaborative environment for team members to work together in real-time.

mockup typography

Design - Neubrutalism

Sustainable colors and a Neubrutalism theme were used for the nextjs application. Neubrutalism, also known as New Brutalism, is a design movement that emerged in the 1950s and 60s as a response to the prevailing trends in architecture and urban design. The term "brutalism" itself derives from the French word "beton brut," or raw concrete, which refers to the primary material used in the style. Neubrutalism, on the other hand, takes the principles of Brutalism and applies them in new and innovative ways.

At its core, Neubrutalism is characterized by a focus on simplicity, honesty, and functionality in design. It eschews ornamentation and decoration in favor of a raw, stripped-down aesthetic that emphasizes the essential elements of a structure. This includes the use of raw materials such as concrete, brick, and steel, as well as exposed building systems and functional details.

One of the key aspects of Neubrutalism is its use of modular design principles. Buildings are often constructed from a series of pre-fabricated components, which allows for flexibility and adaptability in design. This approach also enables buildings to be constructed more quickly and efficiently, which can be particularly important in urban areas where space is at a premium.

Neubrutalist buildings are often characterized by their sculptural quality and strong geometric shapes. This includes the use of angular forms, sharp edges, and bold lines. The style is also known for its use of natural light and shadow, which can create a sense of drama and depth in a space.

While Neubrutalism initially gained popularity in the mid-20th century, it continues to be influential today. Its focus on sustainability, functionality, and affordability has made it a popular choice for many architects and designers. It is particularly well-suited to large-scale, public buildings such as museums, libraries, and cultural centers, where its bold and sculptural qualities can make a powerful statement.

In conclusion, Neubrutalism is a design movement that emphasizes simplicity, honesty, and functionality in architecture and urban design. It is characterized by the use of raw materials, modular design principles, and strong geometric shapes. While it emerged in the mid-20th century, it continues to be influential today and is particularly well-suited to large-scale public buildings.

Bachelor Thesis - collect data