Nextjs Serveractions Form Mongodb Project

This is a combined solution to the Fullstack CRUD Nextjs 14 Contact Book Application Project and File Upload in Next.js 13 App Directory with NO libraries projects. I'm practicing and developing my coding competency by building projects after projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
  • My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
  • Author
  • Acknowledgments

Overview

The Challenge/User Stories

Task: Read, research and develop a No-code tool in Nextjs. It should be able to take in dynamic configurations for pages and routes It should be able to take in dynamic configurations for forms, form validations and form submissions and storage. For storage, use any data store of your choice. If it is too much of a hassle, you may ignore it. Forms must be presented, filled in and can be retrieved to be presented to another user. Form fields must be dynamic enough to take in INTs only, STRING only, BOOLEAN and FILE UPLOADS fields Think of this challenge as recreating Notion/ Webflow & Google forms in Nextjs

Screenshot

Links

• Solution URL: https://github.com/traez/nextjs-serveractions-form-mongodb-project
• Live Site URL: https://nextjs-serveractions-form-mongodb-project.vercel.app/

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox and CSS Grid
• Mobile-first workflow
• React - JS library
• Next.js - React framework
• Tailwind CSS
• Typescript
• Nodejs (with/without Expressjs)
• MongoDB
• GraphQL
• React Native

What I learned

• FormData Web API: This API allows you to construct key-value pairs representing form fields and their values for sending with methods like fetch() etc.
• Cloudinary with MongoDB: Cloudinary is a great solution for storing images and videos. You can store the URL provided by Cloudinary after uploading a file in your MongoDB documents. This approach lets you reference the media asset from your application without storing the actual file in MongoDB, saving storage space and potentially improving performance.
• File Upload in Next.js (without libraries): Next.js allows for file upload handling on both the client-side and server-side without additional libraries. This can be achieved using built-in functionalities like the FormData object and server-side rendering techniques.

Continued development

• More projects; increased competence!

Useful resources

Stackoverflow
YouTube
Google
ChatGPT

Author

• Website - Trae Zeeofor
• Twitter - @trae_z

Acknowledgments

-Jehovah that keeps breath in my lungs