[DMP 2024]: Survey and Polling - Frontend

[a2i-dpg]

Ticket Contents

Description

A survey and polling system is a tool or platform designed to collect data and opinions from a group of individuals, typically referred to as respondents or participants. These systems are commonly used in various fields including market research, academia, politics, and organizational management to gather insights, feedback, or preferences from a targeted audience. The backend of the solution can be found at : https://github.com/a2i-code-For-Govstack/sp-service-solutions-api

New feature Development Scope:

1. Admin Panel for individual integrated System
2. Dashboard for individual integrated System
3. Data Analysis tool
4. Graphical Representation Tools

Goals & Mid-Point Milestone

Goals for Survey and Polling:

Accuracy: Ensure that survey and polling data accurately reflect the opinions and preferences of the target audience. Engagement: Encourage active participation from respondents to gather meaningful insights. Versatility: Provide a platform capable of conducting surveys and polls on various topics and formats. Accessibility: Make surveys and polls easily accessible to a diverse range of respondents, including those with disabilities. Data Security: Implement robust security measures to protect the privacy and confidentiality of respondent data. Analytical Capabilities: Offer tools for data analysis to derive actionable insights from survey and polling results. Scalability: Enable the platform to handle large volumes of responses efficiently, especially during peak periods.

Milestones for Survey and Polling:

Platform Development: Build the infrastructure and user interface for creating and distributing surveys and polls. Beta Testing: Conduct testing with a small group of users to identify and address any issues or bugs. Launch of Initial Features: Release the platform with basic survey and polling capabilities. Feedback Collection: Gather feedback from early users to guide the development of additional features and improvements. Enhanced Features: Implement advanced features such as branching logic, multimedia support, and integration with third-party tools. Security Audit: Conduct a thorough security audit to ensure compliance with data protection regulations and best practices. Analytics Integration: Integrate analytics tools to provide users with insights into survey and polling results. Official Launch: Publicly announce the platform's official launch, marking its availability for widespread use.

Setup/Installation

Frontend Setup

---

install dependencies

$ npm install

serve with hot reload at localhost:3000

$ npm run dev

build for production and launch server

$ npm run build $ npm run start

generate static project

$ npm run generate

Expected Outcome

Make the product as Plug and Playable , more inntegratable and user friendly

Acceptance Criteria

N/A

Implementation Details

Frontend: nuxt2

Mockups/Wireframes

N/A

Product Name

Survey and Polling - Frontend

Organisation Name

a2i (aspire to innovate)

Domain

⁠Service Delivery

Tech Skills Needed

Nuxt2.js ,Bootstrap, Chart.js, Feature, React, RESTful APIs, Test, TypeScript, UI/UX/Design, Other

Mentor(s)

a2i , harun , Md. Ashiqur Rahman ,nahin , sanaullah

Category

API, Analytics, Beginner Friendly, Configuration, Frontend, Other

[hardik-pratap-singh]

Hello @a2i-dpg ! I want to work on this project. Can you please guide me ?

[yuvrajrathva]

Hi @a2i-dpg , I'm Yuvraj Rathva, a Computer Science and Engineering student from IIT Jodhpur. I'm excited about Survey and Polling project by a2i, and I'm excited to contribute. With experience in Bootstrap and Chart.js, I'm well-equipped to assist in developing the frontend features. The focus of this project is on enhancing service delivery through cutting-edge survey and polling solutions, which intrigues me. My background in frontend development, particularly with React.js and Bootstrap, aligns seamlessly with the objectives of designing user-friendly admin panels and dashboards. For more information on my experiences and projects, feel free to explore my Github or Portfolio.

How I can contribute:

• With Nuxt2.js and Bootstrap, I will design easy-to-use admin panels and dashboards for survey management and data analysis.
• Through Chart.js and other visualization tools, I will create data analysis tools and visual representations to give users valuable insights.
• By prioritizing user-friendly design and interactive elements, I will make sure the platform accurately captures the thoughts and preferences of users and encourages engagement.
• By creating a well-designed and user-friendly platform, I will ensure that it is accessible to a wide variety of users, including those with disabilities.
• Following industry standards and using secure coding methods, I will establish strong security protocols to safeguard respondent data and ensure the platform can efficiently handle high response rates.
• Working closely with the team, I will incorporate analytics tools to offer users insights on survey findings and perform a comprehensive security review to meet data protection laws.

Looking forward to contributing to this project!

[Tonystark121]

Hello @a2i-dpg, I'm Rajeev Kumar, a pre-final-year student at IIT BHU. I'm thrilled about the Survey and Polling project by a2i and eager to contribute. With my experience in MERN stack development, I believe I have the necessary skills to make valuable contributions to this project.

Could you please guide me on how to get started? Is there a community group or forum where I can ask my queries and get further guidance?

[a2i-dpg]

Hello @a2i-dpg ! I want to work on this project. Can you please guide me ?

Hello , hardik-pratap-singh . Can you please specify , how do you want to contribute in the project ?

[a2i-dpg]

Looking forward to contributing to this project!

Great ! Looking forward for the contribution as well. Please let us know if any more details are required from our end for your contribution.

[a2i-dpg]

Hello @a2i-dpg, I'm Rajeev Kumar, a pre-final-year student at IIT BHU. I'm thrilled about the Survey and Polling project by a2i and eager to contribute. With my experience in MERN stack development, I believe I have the necessary skills to make valuable contributions to this project.

Could you please guide me on how to get started? Is there a community group or forum where I can ask my queries and get further guidance?

Hi Tonystark121 ! . Can you please specify on which feature you want to work on and what kind of guidance are you seeking primarily ?

[hardik-pratap-singh]

Hello @a2i-dpg ! I want to work on this project. Can you please guide me ?

Hello , hardik-pratap-singh . Can you please specify , how do you want to contribute in the project ?

I want to take this project as part of my C4GT journey 2024. I think I can complete the goals and milestones listed above.

Additionally, I was trying to look at the application features but while doing npm install, I am getting dependency confliction issues. Can you help me with that ?

[a2i-dpg]

Hello @a2i-dpg ! I want to work on this project. Can you please guide me ?

Hello , hardik-pratap-singh . Can you please specify , how do you want to contribute in the project ?

I want to take this project as part of my C4GT journey 2024. I think I can complete the goals and milestones listed above. Additionally, I was trying to look at the application features but while doing npm install, I am getting dependency confliction issues. Can you help me with that ?

hi , hardik-pratap-singh .thanks for reaching out. Its great to see your interest for the contribution. can you please show the error you are facing or copy the error and paste it here ? looking forward for your contribution

[hardik-pratap-singh]

Hello @a2i-dpg ! I want to work on this project. Can you please guide me ?

Hello , hardik-pratap-singh . Can you please specify , how do you want to contribute in the project ?

I want to take this project as part of my C4GT journey 2024. I think I can complete the goals and milestones listed above. Additionally, I was trying to look at the application features but while doing npm install, I am getting dependency confliction issues. Can you help me with that ?

hi , hardik-pratap-singh .thanks for reaching out. Its great to see your interest for the contribution. can you please show the error you are facing or copy the error and paste it here ? looking forward for your contribution

I am getting this while doing npm install

[dvjsharma]

Hey @hardik-pratap-singh. I noticed conflicting dependencies in your logs. You can resolve peer dependency conflicts by using npm install --legacy-peer-deps. Also, you might encounter a digital envelope routines not supported error. You can resolve it by modifying the start and build script to have the legacy OpenSSL provider enabled, or by simply running export NODE_OPTIONS=--openssl-legacy-provider.

[hardik-pratap-singh]

@dvjsharma Thanks for the help ! Project is running successfully on my local system.. But I think I will need admin creds to login into the application. Is it so ?

[dvjsharma]

Yes, it appears so. Setting up the backend is necessary, even when logging in as an admin. I attempted it, but unfortunately, the repository does not contain any dummy data. The migration scripts only create the schema in a SQL database. I am currently exploring ways to access it and obtain a key to log into the frontend. Maybe mentors can help on this.

/cc @a2i-dpg

[Tonystark121]

Hello @a2i-dpg, I'm Rajeev Kumar, a pre-final-year student at IIT BHU. I'm thrilled about the Survey and Polling project by a2i and eager to contribute. With my experience in MERN stack development, I believe I have the necessary skills to make valuable contributions to this project. Could you please guide me on how to get started? Is there a community group or forum where I can ask my queries and get further guidance?

Hi Tonystark121 ! . Can you please specify on which feature you want to work on and what kind of guidance are you seeking primarily ?

Hello @a2i-dpg, I'm Rajeev Kumar, a pre-final-year student at IIT BHU. I'm thrilled about the Survey and Polling project by a2i and eager to contribute. With my experience in MERN stack development, I believe I have the necessary skills to make valuable contributions to this project. Could you please guide me on how to get started? Is there a community group or forum where I can ask my queries and get further guidance?

Hi Tonystark121 ! . Can you please specify on which feature you want to work on and what kind of guidance are you seeking primarily ?

Sorry for the delay response sir, as I was traveling and couldn't respond sooner. I'm very excited about the survey and polling system project and eager to contribute to its development from scratch to end, but have more inclination at working on the Admin Panel and Dashboard features, as I have experience with similar features. I believe my expertise in these areas will be valuable for the project.

I'm seeking your guidance on how to structure the project proposal effectively. Additionally, could you please provide details on the frameworks and tools expected to be used for building this project? This information will help me prepare thoroughly and contribute effectively.

[Tonystark121]

@a2i-dpg Sir, upon setting up the project on my local system, it requires login credentials to move forward. Is it necessary to set up the backend part as well?

[hardik-pratap-singh]

@dvjsharma Thanks for the help ! Project is running successfully on my local system.. But I think I will need admin creds to login into the application. Is it so ?

@a2i-dpg @dvjsharma Can you please guide me what to do next ?

[AbhimanyuSamagra]

Do not ask process related questions about how to apply and who to contact in the above ticket. The only questions allowed are about technical aspects of the project itself. If you want help with the process, you can refer instructions listed on Unstop and any further queries can be taken up on our Discord channel titled DMP queries. Here's a Video Tutorial on how to submit a proposal for a project.

[a2i-dpg]

@a2i-dpg Sir, upon setting up the project on my local system, it requires login credentials to move forward. Is it necessary to set up the backend part as well?

yes

[Coderpj2020]

Hello @a2i-dpg @NahinAhmed28 @arprinceofficial , I've successfully set up both the frontend and backend repositories on my local system. However, I'm facing an issue where accessing the pages on the server prompts for login credentials. Could you please provide guidance on how to proceed further? Attached are screenshots of the frontend and backend servers for your reference. Kindly confirm if they are rendering correctly on my system. Thank you for your assistance.

backend ss:

[a2i-dpg]

in order to use the frontend with dummy data you have to clone and deploy the backend api system as well from: https://github.com/a2i-code-For-Govstack/sp-service-solutions-api and the dummy database can be found at below drive link: https://drive.usercontent.google.com/download?id=1sULrd8pno8SNmay8Z1sPhzQ8j5ERitdY&export=download&authuser=0

[Coderpj2020]

Ok I will do asap

On Sun, May 5, 2024, 11:08 a2i @.***> wrote:

in order to use the frontend with dummy data you have to clone and deploy the backend api system as well from: https://github.com/a2i-code-For-Govstack/sp-service-solutions-api and the dummy database can be found at below drive link:

https://drive.usercontent.google.com/download?id=1sULrd8pno8SNmay8Z1sPhzQ8j5ERitdY&export=download&authuser=0

— Reply to this email directly, view it on GitHub https://github.com/a2i-code-For-Govstack/sp-service-solutions-frontend/issues/1#issuecomment-2094641019, or unsubscribe https://github.com/notifications/unsubscribe-auth/AW4QE727DXKGGD2VTPJZIE3ZAXAWNAVCNFSM6AAAAABFDAHET6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAOJUGY2DCMBRHE . You are receiving this because you commented.Message ID: <a2i-code-For-Govstack/sp-service-solutions-frontend/issues/1/2094641019@ github.com>

[arprinceofficial]

Hello @a2i-dpg @NahinAhmed28 @arprinceofficial , I've successfully set up both the frontend and backend repositories on my local system. However, I'm facing an issue where accessing the pages on the server prompts for login credentials. Could you please provide guidance on how to proceed further? Attached are screenshots of the frontend and backend servers for your reference. Kindly confirm if they are rendering correctly on my system. Thank you for your assistance.

backend ss:

Could you pls show me the Screen Shot of console log and network ?

[shaunak-09]

Hello @a2i-dpg @arprinceofficial , I am Shaunak Ghosh, a pre-final year student at IIT Kharagpur. I have successfully configured both the frontend and backend components on my local system, including the setup of the SQL database. Here, as I can see the credentials mentioned in the user table should be used to login but the passwords in the database are hashed. So, could you please provide me the credentials.

[arprinceofficial]

Hello @a2i-dpg @arprinceofficial , I am Shaunak Ghosh, a pre-final year student at IIT Kharagpur. I have successfully configured both the frontend and backend components on my local system, including the setup of the SQL database. Here, as I can see the credentials mentioned in the user table should be used to login but the passwords in the database are hashed. So, could you please provide me the credentials.

Update with this: $2y$10$9I08LgVvWkFs7Z6w/1rgreAQ0p9KDsCvKjGNJfzfM0bdGXhQ7L4by pass: 12345678

[shaunak-09]

@arprinceofficial Ok, I'll check. Could you please share the email address where I can send my proposal for review? Thank you.

[praxcodes]

hello @a2i-dpg @arprinceofficial I am interested to contribute for this project and I have also tried setting up the frontend and backend locally and made a proposal, can you guide me more on the same

[Arnav2001]

Weekly Goals

Week 1

• [x] task 1 connecting with mentor and clarifying the problem statement
• [x] task 2 setting up the coding environment on local system
• [x] task 3 making the sign-up and login page for ADMIN
• [x] task 4 making a login page for USER
• [x] task 5 writing down all possible usecases of auth

Week 2

• [x] task 1 tested all api endpoints & integrating api for creating user
• [x] task 2 integrating smtp service , logic for sending mail with token for verification
• [x] task 3 making ui for signup , login , forgot password , forgot user
• [x] task 4 written algorithm for selected authorization

Week 3

• [x] task 1 setup xampp , postman & new database in local system
• [x] task 2 Making Navbar section for both mobile view and web view
• [x] task 3 giving css for all pages, watching different website for user interface
• [x] task 4 developed Profile page and written code for updating metadata & Delete account after verification logic via smtp
• [x] task 5 written console and alert for error handling

Week 4

• [x] task 1 made architecture for the forms page
• [x] task 2 written logic for user to create short text question , long text question , MCQ , multianswer choice question ,number and file upload
• [x] task 3 made wireframe and coded it for the create-form page
• [x] task 4 coded the myforms page and different component required like render form , modal etc
• [x] task 5 integrated different component of form admin as per the flow

Week 5

• [x] task 1 made dynamic routing for getting hash from backend <Route path="/live/instance/:hash" element={<Create />} />
• [x] task 2 made UI for title , description , created_at , updated button toggle button in create , voters and responses
• [x] task 3 created table by using mui for presenting the instances created yet by the user
• [x] task 4 integrated different type of instances , ( open to all , specific users , oauth )
• [x] task 5 integrated different components

Week 6

• [x] Implemented Toastify for alerts, errors, and informational messages to enhance user feedback during interactions.
• [x] Developed logic for adding a single user, allowing for streamlined user management within the application.
• [x] Implemented user login functionality, enabling voters to log in and receive an access token for authentication.
• [x] Generated Google Auth credentials from Google Developers Console to facilitate OAuth 2.0 authentication for users.
• [x] Established conditions based on instanceStatus (open or closed) and instanceAuthType (open to all, specific user, org login) to control access to the application.

Week 7

• [x] Created methods and requests to the API in liveService.js for efficient data handling and interaction with backend services.
• [x] Integrated Material-UI (MUI) tables for displaying form lists and voter lists, improving data presentation and usability.
• [x] Implemented pagination in tables to enhance navigation through large datasets, improving user experience.
• [x] Developed a searching algorithm in tables, allowing users to quickly find specific entries based on their queries.

Week 8

• [x] Met with the organizational mentor and noted their suggestions to improve the current project structure and workflow.
• [x] Edited the UX by making the question type div separate, which enhances clarity and usability for users when creating forms.
• [x] Changed the voters menu and updated the CSS for a more consistent and visually appealing user interface.
• [x] Updated the responses menu in the create form pages to better align with the new UX design and improve user experience.
• [x] Started saving data in local storage to ensure data persistence and improve the reliability of the application.

Week 9

• [x] Used MUI ThemeProvider to create a generalized theme for the entire website, ensuring a consistent look and feel across all pages.
• [x] Added a GIF logo of a2i in the navbar to enhance brand identity and provide a dynamic visual element.
• [x] Added the route <Route path="/response/:hash/answers/:id" element={<IndividualResponse/>} /> in App.js to handle individual response viewing.
• [x] Developed an individual response viewing page, calling the API to fetch response data by id and the entire form for detailed viewing.
• [x] Added logic to provide space for the dashboard section in the responses menu of the create form page, improving navigation.

Week 10

• [x] Tried different themes and font types, finally selecting a green-white combination and Roboto font as the most suitable for the project.
• [x] Made small changes like adjusting margins, correcting padding, and lowercasing fonts to refine the overall design.
• [x] Attempted to use shad CDN but found it required complete installation of Tailwind CSS, so decided to keep it on hold for now.
• [x] Researched other graph.js libraries for potential implementation to enhance data visualization capabilities.

Week 11

• [x] Implement Form Sharing Options: Add functionality that allows users to share forms via different platforms such as WhatsApp, email, and Facebook.
• [x] This involves integrating sharing APIs and ensuring that the form link is easily accessible and shareable across these platforms.
• [x] Polish UI and Test Responsiveness: Refine the user interface by making design adjustments to ensure consistency and visual appeal.
• [x] Conduct thorough testing across various devices and screen sizes to ensure the UI is fully responsive and provides a seamless experience for all users.

Week 12

• [x] Test Forms and Surveys for Multiple Scenarios: Create and test different forms and surveys to cover a wide range of use cases.
• [x] This includes testing various question types, conditional logic, and submission workflows to ensure everything functions correctly under different scenarios.
• [x] mplement Loader for Data Loading: Add a loading indicator that appears during data fetching or submission processes.
• [x] his visual feedback will improve the user experience by indicating that the system is processing their request, reducing uncertainty and enhancing the overall interaction.

[Gaurav05082002]

Weekly Learnings & Updates

Week 1

• Learning 1 setup the repo ,
• Learning 2 how to make high-level design for a project
• Learning 3 narrowing down the requirement of project
• learning 4 Reading Documentation of react and material UI
• Learning 5 had meet with backend people and mentors to make a mindmap of project work

Week 2

• Learning 1 xampp documentation , solving the bug of xampp MySQL shutting down again and again , read about working of ports and port mapping
• Learning 2 learnt how to use postman , revised axios and mui library
• Learning 3 learnt about smtp library used for verification in our project , revised setting up environment
• Learning 4 read documentation of different type of request
• Learning 5 revised react hooks , like usestate , use context , use effect etc

Week 3

• Learning 1 learnt the difference between working of axios lib methods and normal methods
• Learning 2 learnt about different storage i.e , local storage (stays..) , session storage (get removed after some time ) ,http storage ( needs backend )
• Learning 3 JWT token json web token , it have header payload and verifying signature , used it in our project
• Learning 4 understand about errors if response is 200 then ok , if it is 403 then cors problem , if it is 400 that is bad request body need to be changed
• Leanining 5 read about react router dom , setting path etc

Week 4

• Learning 1 learnt the flow of function as prop from parent component to child components
• Learning 2 revised the CSS theory like display flex and its other features
• Learning 3 learnt making wireframes online , used it and then coded it for create form page
• Learning 4 scrolled other survey websites like google form to know the requirements and get better understanding of UI ux for our product
• Leanining 5 raised 2 prs one for auth+createsurvey one for formpage and form-fill page

Week 5

• Learned to implement dynamic routing in React to fetch and use hash values from the backend.
• Learned to design a user interface for form inputs, including title, description, and toggle buttons, in a React component.
• Learned to create responsive tables using Material-UI to display instances created by the user.
• Learned to integrate various types of instance authentication methods, including open access, specific user access, and OAuth, into a React application.
• Learned to integrate and manage different React components effectively within a single application.

Week 6

• Learned to implement Toastify for displaying alerts, errors, and informational messages, enhancing user feedback and improving the overall user experience.
• Gained knowledge in developing logic for adding a single user, which involved creating a user interface, handling user input, and integrating with backend services to save user data.
• Learned to implement user login functionality, including creating a login form, validating user credentials, and securely storing access tokens for authentication purposes.
• Acquired skills in generating Google Auth credentials from the Google Developers Console and integrating OAuth 2.0 authentication into the application, enabling users to log in using their Google accounts.
• Learned to establish conditions based on instanceStatus and instanceAuthType to control access to the application, ensuring that users can only access the appropriate content based on their permissions.

Week 7

• Gained experience in creating methods and requests to the API in liveService.js, which involved designing API endpoints, handling HTTP requests, and processing data for efficient communication with the backend.
• Learned to integrate Material-UI (MUI) tables for displaying form lists and voter lists, which included customizing table components, handling data fetching and pagination, and enhancing the overall data presentation.
• Acquired knowledge in implementing pagination in tables, which involved calculating page numbers, handling page changes, and updating the table content accordingly to improve user experience when navigating through large datasets.
• Learned to develop a searching algorithm in tables, which included creating a search input, processing user queries, and filtering table data to enable users to quickly find specific entries based on their search criteria.

Week 8

• Gained valuable insights by meeting with the organizational mentor and noting their suggestions, which helped in understanding the best practices for improving project structure and workflow.
• Enhanced user experience by editing the UX to make the question type div separate, learning how to improve clarity and usability for users during form creation.
• Improved the visual appeal and consistency of the user interface by changing the voters menu and updating the CSS, which involved refining styling techniques and layout adjustments.
• Enhanced the responses menu in the create form pages to better align with the new UX design, learning how to improve user experience through thoughtful design changes.
• Acquired skills in data persistence by starting to save data in local storage, ensuring that user data remains intact and accessible across sessions.

Week 9

• Learned to use MUI ThemeProvider to create a generalized theme for the entire website, which included setting up a consistent look and feel and applying theme properties across all components.
• Added a GIF logo of a2i in the navbar, gaining experience in enhancing brand identity and incorporating dynamic visual elements into the website.
• Implemented a new route in App.js for individual response viewing, learning to handle dynamic routing with <Route path="/response/:hash/answers/:id" element={<IndividualResponse/>} />.
• Developed an individual response viewing page by calling the API to fetch response data by id and the entire form, acquiring skills in API integration and dynamic content rendering.
• Improved the navigation in the create form page by adding logic to provide space for the dashboard section in the responses menu, learning to manage layout adjustments dynamically.

Week 10

• Gained practical experience in UI/UX design by experimenting with various themes and font types. This process deepened my understanding of how different color schemes and typography can influence the visual appeal and usability of a website, ultimately leading to the selection of a green-white combination and Roboto font.
• Enhanced attention to detail by making small design adjustments such as modifying margins, correcting padding, and lowercasing fonts. This taught me the significance of precision in design work and how minor tweaks can greatly improve the overall user experience.
• Gained insights into dependency management through the exploration of shad CDN, realizing that it required the full installation of Tailwind CSS. This experience highlighted the importance of assessing the implications of integrating new tools and ensuring they align with project requirements and existing setups.
• Expanded my knowledge of data visualization by researching various graph.js libraries for potential use. This research provided a deeper understanding of the features and capabilities of different libraries, equipping me with the knowledge to select the most appropriate tool for enhancing data presentation in the project.

Week 11

• ffective Sharing Enhances User Engagement: Implementing sharing options for forms across multiple platforms like WhatsApp, email, and Facebook significantly increases user engagement and form reach.
• It simplifies the distribution process, making it easier for users to share forms with their networks.
• Refining the UI and ensuring responsiveness are essential for providing a seamless user experience.
• Small design adjustments and thorough testing across devices help maintain a consistent look and feel, improving overall user satisfaction.

Week 12

• Thorough Testing Is Essential: Testing forms and surveys in various scenarios is crucial for identifying potential issues and ensuring functionality.
• By covering different use cases and workflows, you can ensure that the forms perform reliably and meet user needs.
• Visual Feedback Improves User Experience: Implementing a loading indicator during data operations helps manage user expectations and reduces uncertainty.
• This simple addition enhances the user experience by providing clear feedback on the system’s processing status.