Modal Builder is a web application built with NextJS that allows users to easily create and customize custom popups (modals) for their websites with ease. The modals are designed to display forms that can be handled with the Formik library to efficiently collect user inputs.
Formik is a popular form library for React that simplifies form management, validation, and submission.
To learn more about Formik and how to use it, please refer to the Formik Documentation.
📝 Source Code: GitHub Repository
Modal Builder is built using the following technologies:
- NextJS - A React framework for server-side rendering and static site generation.
- React - A JavaScript library for building user interfaces.
- Tailwind CSS - A utility-first CSS framework for rapid UI development.
- TypeScript - A typed superset of JavaScript that compiles to plain JavaScript.
- Formik - A popular form library for React that helps with form handling, validation, and submission.
To get started with Modal Builder on your local machine, follow these steps :
- Clone the repository:
git clone https://github.com/saadazghour/modal-builder.git- Change to the project directory:
cd modal-builderFirst, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev-
Open http://localhost:3000 with your browser to see the result.
-
This is a NextJS project bootstrapped with
create-next-app.
Contributions to Modal Builder are welcome! If you find a bug, have suggestions for improvement, or want to add new features, feel free to open an issue or submit a pull request.
This project is licensed under the MIT License - see the LICENSE file for details.
To learn more about NextJS, take a look at the following resources:
- NextJS Documentation - learn about NextJS features and API.
- Learn NextJS - an interactive NextJS tutorial.
You can check out the NextJS GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.