opencodeiiita / savemyform-frontend

Frontend for the project SaveMyForm. Backend Less form submission collection for your application

SaveMyForm-Frontend

Backend Less form submission collection for your application!

What problem SaveMyForm solves?

For frontend-only applications if the developer wants to collect form submissions from his/her users, he/she requires to create a complete backend application for it.

It Solves the problem by providing the developers a url which they can use for form submissions by sending a POST request to the url.

Tech Stack

• Nodejs (v16.18.0)
• Nextjs
• Antd
• NextUI
• Vercel

Design Template

Open Figma File

Dependencies

You need npm/yarn installed in your local machine in order to run this app.

Installation

  npm install 
  npm run dev

How To Setup

• Make sure your machine is having internet connection.
• Fork the repository.
• Open shell (which ever your OS support) on your PC.
• Change drive to the location where you want your project to be copied.
• Clone it to your local setup by using command git clone <repo link>.
• Once cloned, Run the following command in the root directory of the project npm install.
• After the process is completed, run the command npm run dev.
• The website will be live on localhost:3000.

Reference Links

• Download and install the latest version of Git.
• Set your username in Git.
• Set your commit email address in Git.
• Antd Docs
• NextUI Docs
• Setup Nodejs

Claim an issue

Comment on the issue. In case of no activity on the issue even after 2 days, the issue will be reassigned. If you have difficulty approaching the issue, feel free to ask on our discord channel.

Communication

Whether you are working on a new feature or facing a doubt please feel free to ask us on our discord channel. We will be happy to help you out.

Guidlines

Please help us follow the best practice to make it easy for the reviewer as well as the contributor. We want to focus on the code quality more than on managing pull request ethics.

• People before code: If any of the following rules are violated, the pull-requests must not be rejected. This is to create an easy and joyful onboarding process for new programmers and first-time contributors.

• Single commit per pull request and name the commit as something meaningful, example: Adding <-your-name-> in students/mentors section.

• Reference the issue numbers in the commit message if it resolves an open issue. Follow the PR Template Issue: < ISSUE NUMBER >

• Provide the link to live gh-pages from your forked repository or relevant screenshot for easier review.

• Pull Request older than 3 days with no response from the contributor shall be marked closed.

• Do not make PR which is not related to any issues. You can create an issue and solve it once we approve them.

• Avoid duplicate PRs, if need be comment on the older PR with the PR number of the follow-up (new PR) and close the obsolete PR yourself.

• Be polite: Be polite to other community members.

Our Top Contributors ♥️

savemyform-frontend's Issues

POST Project

For this task you have to write a function which sends a POST request to backend to create a new project.

Steps to follow:

• Read the documentation.
• Use the post method defined in components/utils/API.
• Write your code here.

Go to localhost:3000/dashboard/project/newproject to test your function.

Create the dashboard page

Create the dashboard page for the project . Go to pages > dashboard > index.js and do the required changes . You can make different components and sections to make the page or do the complete work in the single file.

---

Go to localhost:3000/dashboard to see your changes.

Design of the page is in the figma link provided in the Readme under the heading Client Section.

You can ignore the navbar for now and place temporary data in all the fields present .

Form Dashboard

For this task you have to create the form dashboard page, design is provided in the figma file under heading Form Dashboard.
You can take reference from project dashboard page. (localhost:3000/dashboard/project)

Write your code in this file.

Go to localhost:3000/dashboard/project/2/3 to view your changes.

Display Dashboard

Display the data from backend to frontend and show all the fields.
For any doubts ask on discord.
Go to localhost:3000/dashboard to see your changes.

Form Field

For this task, you have to create a component in components/element. The sample design of the component is in figma file under heading New Form . No need to make it exact same.

Steps to follow:

• The first column is Name which will be a text input.
• The second column is type of input . It should be dropdown listing all possible html input types. List of all possible html input types (https://www.w3schools.com/html/html_form_input_types.asp).
• The third column is isRequired boolean which is of type checkbox.
• Import your component here. You can view your changes on localhost:3000/dashboard/project/2/newform.

You can use antd components to implement dropdown, checkbox etc.
For any doubts ask on discord.

1000 responses

For this task, you have to code the save upto 1000 responses feature section of the website. Design is provided in the figma link provided in README under heading HomeScreen Header. Desktop and mobile both designs are provided.

Steps to follow:

• Create a section named SaveResponsesSection in components/sections/ and work there.
• Import the section in pages/home .
• You can see your changes on `http://localhost:3000/home.

---

Make sure the section is responsive.

Implement Signup functionality

Steps to implement:

• Take the user input from the form
• Check that password length should be greater than 6.
• Request structure can be found here
• For successful response from the server, you will get a secret in the response. Store that in localStorage with key name secret.
• For each response show a message(antd component) whether signup was successful or not.
• In the recaptcha_token field of signup POST request, you can send temporary string for now.

---

The helper functions for sending requests are present in the components/utils/API folder and for localStorage functions are in components/utils/LocalStorage folder. Use these function only to send request.

---

Make sure to pull before starting your work.

For any doubts or difficulty, you can ping me on discord, I'll try to help you out as soon as possible.

All the Best!!

Create the Login Page

Create the login page, just place, and style the components. Make the page same as of signup page. You can refer the code in signup page.

Required input fields:

• Email
• Password

and a submit button.

Use tailwind for styling, you can also use antd components on this page.

---

You will have to write the code in this file: pages > signin > index.js

Update FAQs and routing

Write unique faqs in a json file and map the objects on the faq folder and update the path to faq.

Google OAuth

For this task, you have to implement Google OAuth on signup and signin page.

Steps to follow:

• Read Documentation
• Create a component GoogleOAuth in components/element/.
• Place the component in signup and signin page next to submit button.
• Create a button in the component. Button design is given below.
• Fetch google auth url from backend.
• Open the url in same tab (find a way to do it)
• After successful authorization, rest of the process will continue in signin/oauth .
• In the signin/oauth page, in the query parameter, you will get a code you will have to send the code to the backend as a POST request.
• On successful response from backend redirect to dashboard.

Implement Signin function

Steps to implement:

• Take the user input from the form
• Request structure can be found here
• For successful response from the server, you will get a secret in the response. Store that in localStorage with key name secret.
• For each response show a message(antd component) whether signin was successful or not.
• In the recaptcha_token field of signup POST request, you can send temporary string for now.
• If the secret is already in localStorage redirect to dashboard of user.

---

The helper functions for sending requests are present in the components/utils/API folder and for localStorage functions are in components/utils/LocalStorage folder. Use these function only to send request.

---

Make sure to pull before starting your work.

For any doubts or difficulty, you can ping me on discord, I'll try to help you out as soon as possible.

All the Best!!

Documentation

Steps to follow

• Create a folder name documentation on the outermost level.
• In the folder initialize the documentation project using the link below provided.

Follow the steps described in https://nextra.site/docs/docs-theme/start#start-as-new-project .
Use npm

BUG

There is a small change to be done on home page. I have attached the image below, The left vector should be properly aligned according to the design in figma file. Make sure no other thing gets affected by your changes.

Create the Project Dashboard Page

Create the dashboard page for the project . Go to pages > dashboard > project > index.js and do the required changes . You can make different components and sections to make the page or do the complete work in the single file.

---

Go to localhost:3000/dashboard/project to see your changes.

Design of the page is in the figma link provided in the Readme under the heading Project Dashboard.

You can ignore the navbar for now and place temporary data in all the fields present .

Take reference from dashboard page which is same as of this page so you will get a lot of help from there.

Add Vector on Signin and Signup Page

For this task use this vector and place it on signin and signup page in place of the left div which is having a background colorright now.

The vector is already downloaded in assets folder no need to download it again.

On small screens (<576px) no need to show the vector just hide that div.

Make sure you place the vector on both signin and signup pages.

Verification Page

For this task, you have to code the verification page of the website. Design is provided in the figma link provided in README under heading Verificaton.

Steps to follow:

• Write your code here
• You can see your changes on http://localhost:3000/verify.

---

Make sure the page is responsive. For mobile design remove the left part with logo and name and just keep the right hand side of the desktop design.

Project Settings

For this task, you have to create the project settings page. The page will look same to this.

Write your code here.

Steps to follow:

• Change the Submit button to Save.

Single File Upload

For this task, you have to code the save single file upload feature section of the website. Design is provided in the figma link provided in README under heading HomeScreen Header. Desktop and mobile both designs are provided.

Steps to follow:

• Create a section named SingleFileSection in components/sections/ and work there.
• Import the section in pages/home .
• You can see your changes on `http://localhost:3000/home.

---

Make sure the section is responsive.

Design or find a vector for login/signup page

OPEN TO ALL.
NO need to claim this issue.

We will be displaying a vector on the login/signup page. We are taking reference of the login/signup page from the websites greenhouse.com and mongodb.com. Make sure to pick a vector according to the theme of the project.
Keep in mind, if you are picking a vector from online websites, there should be no copyright issues.

Enter your github account and attach the vector link in the designs.json file, in the respective field.

One Last Time

The home page is ready for the project SaveMyForm. For this task you have to give final touches to the page. The page should be completely responsive on every device, increase or decrease the font size, increase padding, change icons ,etc.

Show your CSS skills and make the page as good as possible. The desktop and mobile designs are provided in figma file. You have to make sure it looks almost same to it else your PR will not be merged.

ERROR 404

Design a ERROR 404 page for the website . The color theme can be found in the figma file (link in README) .

This is an open for all task. No need to claim. Best 2 designs will be merged.

Submit the figma link in the 404 folder. Create a file < github-username >.json and submit the figma link there.

Find a library or npm package for creating documentation page

We have to create documentation for our project SaveMyForm. You might have seen other documentation pages of different pages which have a sidebar. So we want to create a similar kind of page. So find a npm package or some library which helps in creating documentation page UI.
Create a file in documentation folder with file name as < github-username >.json. A sample file is given in the folder refer that and add accordingly.
You can add as many packages as you want with a minimum requirement of 2.
For any doubts, feel free to ask on discord.
The issue is OPEN FOR ALL.

Create the Signup Page

Create the signup page, just place, and style the components. You can add a suitable style to the text input fields. You can reference the attached image for the structure of the signup page, a vector will be placed on the left side in the future, for now you can use a coloured div instead of the vector.

Use tailwind for styling, you can also use antd components on this page.

---

You will have to write the code in this file: pages > signup > index.js

---

---

Feel free to ask doubts on discord.

Logout

Show logout button on navbar if user is signed in and implement logout functionality. Popup an AntD modal before logging out. For logging out just delete the secret from local storage.

Think of FAQs for the project SaveMyForm

OPEN FOR ALL Issue
Think of atleast 2 FAQs for the project SaveMyForm. Refer this document to know about the project and think accordingly.

You can refer other sites to get to know how they frame their FAQ section.

Create a file in faqs folder with file name as < github-username >.json. A sample file is given in the folder refer that and add accordingly.

Files with less than 2 faqs will not be merged and you need to think of unique faqs don't copy from other pull requests.

New Form

For this task, you have to create a page for new form. You have to write your code in this file.

You can use components also and then place them in the file.

You can take reference from this page. (localhost:3000/dashboard/project/newproject)

Required fields

• Form name (type text)
• reCAPTCHA Support ( type checkbox)

You can see your changes on localhost:3000/dashboard/project/id/newform

DELETE Project

Add a delete button on this page below settings button.

On click of button add a modal window, which asks for the password of the user. You can useantd modal for easy implementation.

Go to localhost:3000/dashboard/project to view your changes.

Code the Features Section

For this task, you have to code the JSON Schema Validation feature section of the website. Design is provided in the figma link provided in README under heading HomeScreen Header. Desktop and mobile both designs are provided.

Steps to follow:

• Create a section named JSONSection in components/sections/ and work there.
• Import the section in pages/home .
• You can see your changes on `http://localhost:3000/home.

---

Make the sure section is responsive. No need to work on the navbar and the hero section.

Code 404

For this task, you have to code 404 error page for the website . Design is in the figma file provided. Write your code here.

The page should be responsive.

For mobile design, place the vector on top then text.
Go to localhost:3000/404 to view your changes.

For any doubts, ask on discord.

Minor Changes

• Shift the code of Home.js to index.js.
• Fix links in the navbar
• Attach the Alpha Phase top bar to the ui.

reCAPTCHA

For this task, you have to implement reCAPTCHA support on signup page of the website.

Go to localhost:3000/signup to see your changes.

Take reference from this article: https://dev.to/sumukhakb210/integrating-recaptcha-with-nextjs-4ig6

No need to follow the first step in the article. I will provide you the reCAPTCHA key.

Create the Navbar of the website

Create the navbar for the website. Design is in the figma link provided in the README.
Steps to follow:

• Create a navbar component in components/elements/
• Logo is in the navbar design. Export it from there as svg and create a folder logos in assets/images .
• Import the navbar component in _app.js.

NewForm Fields

For this task, you have to implement FormField Input in newform page of the website.

Steps to follow:

• FormField component is already made in Newform in componenets/element.
• In newform page you have to import this component .
• not more than 10 fields is required
• only one file input is allowed

UPDATE

For this task you have to write a function to update the password of the user in the settings page.

Steps to follow:

• Read the API documentation (https://github.com/opencodeiiita/SaveMyForm-Backend/blob/main/API_Endpoints.md).
• You have to check that New password should be of length >6 .
• Check that new password and confirm password are same.
• Send the post request to backend and log the result.
• check that no input field should be empty.
• If the user clicks on the cancel button clear all the input fields.

Use the functions in API folder defined in components/utils/ .

For any doubts ask on discord.

Code the Hero

For this task, you have to code the hero section of the website. Design is provided in the figma link provided in README under heading HomeScreen Header.

Steps to follow:

• Create a section named HeroSection in components/sections/ and work there.
• Import the section in pages/home .
• You can see your changes on `http://localhost:3000/home.

---

Make the sure hero section is responsive. No need to work on the navbar.

Create the FAQ Page

Create the FAQ page. For this you have to create a accordion similar to mongoDB faq page and you can use placeholder data (Lorem ipsum...) for now.

You have to create a component of accordion in components > elements

• Create a folder in elements folder
• Create a file index.js in that folder and work in that
• Then import that component in faq page in pages folder and place there

DiceBear Avatars

You have to generate a random avatar and show it in place of the filled div left of name and email.

For this follow the steps mentioned in the docs

• Install the npm package for the task.
• Create an element in the elements folder which is in components folder (mandatory for this task) then import it in dashboard page and use.

If you have any doubts, feel free to ask on discord.

Final Section

For this task, you have to code the reCAPTCHA support feature section of the website. Design is provided in the figma link provided in README under heading HomeScreen Header. Desktop and mobile both designs are provided.

Steps to follow:

• Create a section named recaptchaSection in components/sections/ and work there.
• Import the section in pages/home .
• You can see your changes on http://localhost:3000/home.

---

Make sure the section is responsive.

Homepage BUG

There should be no spacing between the two vectors shown in image. Fix that bug.
For any doubts ask on discord.

Tabbed Settings

The settings page is already implemented here.

For this task you have to create a tabbed section as shown in figma file under heading Client Settings.

• When user clicks on password tab, the page should look like Client Settings 2 as shown in figma file.
• When user clicks on account tab, the page should look like Client Settings as shown in figma file.

Write your code here.
Make sure page is responsive.

The default tab to show is Account tab.

Also you have to make sure that user can know which tab is selected. It's upto you how to show which tab is selected. Either change color of selected tab or give it a background. It's all upto you.

Implement Beta Alert Banner on website

For this task, implement a banner as shown in design file.

Follow the steps for better implementation:

• Create a Banner component in component/elements/ and export it
• Implement a cross button to show banner or not as shown in design.
• banner should be responsive.
• We want to show the banner on every page but without importing it again and again on every page. Find a way so that only one import statement works. Try to find the correct way.

---

If you are not able to find the solution you can ask your doubts on discord.

I'll GET You

For this task you have to fetch the details of the user in dashboard page (https://github.com/opencodeiiita/SaveMyForm-Frontend/blob/main/pages/dashboard/index.js)

Steps to follow:

• Read the documentation here.
• Write a function to fetch the user details on the dashboard page and log the response.

For any doubts, ask on discord.

Use the functions provided in API folder in components/utils.

Design the Home Page for the project SaveMyForm

OPEN TO ALL.
NO need to claim this issue.

SaveMyForm is a project that is based on the idea of collecting form responses for other people.

Features:

• Secured(No Spam, JSON Schema Validation)
• Save upto 1000 form responses for 30 days
• Download form responses (CSV, PDF)
• Single File Upload Allowed
• reCAPTCHA Support

These features should be displayed on the home screen and its upto you how to present it.

---

Reference Website: MongoDB

Enter your github account and attach the figma link in the designs.json file.

Update or create new form for new project

The page should look similar to this but make sure you follow the color theme given in the design file in readme.
You should write code here or make components and import here as you wish.
Go to localhost:3000/dashboard/project/newproject to see your changes.

The required fields in the form are:

• Project Name: Text
• Collaborators: For this input field is of type email and there will be a ➕ icon to add more collaborators. See the working of owners field in above given link and implement the same thing for our form.
• Domains: Implement the same way as in the domain field of the above given link.

A checkbox field which asks for whether the project has reCAPTCHA support or not. If it is checked show two input fields:

• reCAPTCHA key
• reCAPTCHA secret

if it is unchecked don't show the input fields.

A Cancel button to clear all the input fields when clicked and a submit button to submit the form which will be implemented later for now just create the submit button and cancel button should be working.

Some code is already there in the file . Either update that or you can create from scratch. Page should be completely responsive

If you have any doubts do ask on discord.

Footer

For this task, you have to code the footer of the website. Design is provided in the figma link provided in README under heading Footer

Steps to follow:

• Create a section named Footer in components/sections/ and work there.
• Import the section in pages/home .
• You can see your changes on `http://localhost:3000/home.

---

Make the sure footer is responsive. Both desktop and mobile designs are provided in the figma.

Edit Project

Implement the edit project page

Another Section

For this task, you have to code the Download your form responses feature section of the website. Design is provided in the figma link provided in README under heading HomeScreen Header. Desktop and mobile both designs are provided.

Steps to follow:

• Create a section named FormResponsesSection in components/sections/ and work there.
• Import the section in pages/home .
• You can see your changes on `http://localhost:3000/home.

---

Make sure the section is responsive.

JSON Schema

Convert the array of input fields present in the newform file into a JSON Schema with every input field name as a property of JSON Schema. All the required input fields should be marked as required in JSON Schema.
I advise you to read the documentation of JSON Schema first before starting.

For any doubts, ask on discord.
See you changes on localhost:3000/dashboard/project/2/newform.

Create the Client Settings Page

Create the client settings page for the project . Go to pages > settings> index.js and do the required changes . You can make different components and sections to make the page or do the complete work in the single file.

---

Go to localhost:3000/settings to see your changes.

Design of the page is in the figma link provided in the Readme under the heading Client Settings.

You can ignore the navbar for now and place temporary data in all the fields present .
Make sure the page is responsive.

Design a logo for project SaveMyForm

OPEN TO ALL.
NO need to claim this issue.

SaveMyForm is a project that is based on the idea of collecting form responses for other people. Design a logo for this project that depicts the same idea.
Enter your github account and attach the figma link in the designs.json file.