DMP 2024: Session Creator

[suryabulusu]

Description

Avanti's online interventions consist of live classes and quizzes. Links are created for each and shared with students via various routes such as WhatsApp, Email, and SMS. Currently, these links are generated manually and stored in several Google Sheets. As we are growing and reaching more students, handling links across multiple spaces has become a cumbersome task. To mitigate this, we started off with a "Session Creator" web application in the previous C4GT iteration.

"Session Creator" platform is in a nascent stage as of now. Quiz link generation is automated, and a barebones UI is set up. Our goal for DMP 2024 is to enable live class generation, conduct pilot research tests with curriculum teams, improve UI/UX, and enhance overall maintainability of the repository.

Goals & Mid-Point Milestone

• Prepare forms for live class generation
• Add live class sessions to db
• Code for duplicating / editing of live class sessions
• Searching / filtering sessions based on certain keys (program, batch, start date, etc.)
• Discord bot notifications for number of sessions created per day
• (Mid Point) Pilot with curriculum team
• Code for editing quizzes (currently, we have code to edit quiz sessions but its not fine-grained)
• CI / CD setup with Github Actions
• Unit tests with Jest (or any other testing service)
• E2E tests with Cypress
• Code for logging, monitoring
• Continuous clean documentation

Setup/Installation

Current codebase is here: https://github.com/avantifellows/quiz-creator/

Expected Outcome

Frontend:
Curriculum team has a one-stop platform to create / edit / duplicate / filter sessions.

Backend:
Handling post / patch updates to Postgres DB.

Repository:
Neatly maintained, documented, tested code.

Acceptance Criteria

• Create / Edit / Duplicate Quiz Sessions
• Create / Edit / Duplicate Live Class Sessions
• Curriculum team finds the UI easier to use than Google Sheets
• CI/CD via Github Actions is implemented
• E2E tests are written

Implementation Details

NextJS React Frontend (with server-side rendering) deployed on AWS Amplify, Postgres DB to store session information

Mockups/Wireframes

https://www.figma.com/file/odHslFwxkxBd31nynFZApk/Design---1---Code4GovTech?type=design&node-id=0-1&mode=design

Product Name

Session Creator

Organisation Name

Avanti Fellows

Domain

⁠Education

Tech Skills Needed

AWS, CI/CD, Database, Design, HTML, JavaScript, MongoDB, React, UI/UX/Design

Mentor(s)

@suryabulusu

Category

Delpoyment, Frontend, Refactoring

[smitjiwani]

Hey @suryabulusu, i would like to work on this project as part of dmp 2024.

[Drish-xD]

Hey @suryabulusu, I would like to contribute in this project/organization.

[Yotshi01]

Hey @suryabulusu, I am looking forward to contribute in this project/organization.

[Nitish0777]

Hey @suryabulusu , I am eager to contribute in this project/organization.

[ombhardwajj]

Hi @suryabulusu, I encountered error code: 'ECONNREFUSED' when trying to run the project. Could you please help me!

[Nidhicodes]

Hi @suryabulusu I would like to contribute to this project as a part of DMP24.

[yuvrajrathva]

Hi @suryabulusu, I'm Yuvraj Rathva, a Computer Science and Engineering student from IIT Jodhpur. Surprisingly, I have a connection with Avanti; I was the mentee of the Avanti fellowship for the years 2019–2020, which was provided to JNV students, and I was part of the JNV Kolhapur batch from JNV Bharuch. I just came across Avanti Fellows' Session Creator project, which excites me, and I'm eager to contribute. With experience in AWS, React, and CI/CD, I'm equipped to help achieve the project goals.

My background in frontend development and UI/UX design makes me well-suited to enhance the Session Creator platform. I'm particularly interested in improving the UI/UX, conducting pilot research tests, and setting up CI/CD with Github Actions. To know more about my experiences and projects, you can check out my Github or Portfolio.

How I Can Contribute:

• My proficiency in React and NextJS, I'll develop a frontend with enhanced UI/UX, ensuring seamless user experience.
• I will incorporate HTML and JavaScript to design intuitive forms for live class sessions, making it easier for users to interact and input data.
• I will leverage my database and backend development expertise to establish a strong connection between the frontend and Postgres DB for efficient handling of session information.
• My experience with CI/CD and Github Actions will enable me to set up automated pipelines for deployment, streamlining development processes
• I will learn testing frameworks like Jest and Cypress to conduct thorough unit and end-to-end tests.
• Focus on clean documentation and maintainability to ensure the repository is well-managed and accessible.

[suryabulusu]

Hello all! Thanks for showing interest in Avanti's project. For those getting started with coding, here are a few relevant links that cover the basics:

Github: https://www.youtube.com/watch?v=tRZGeaHPoaw
GET POST Basics: https://www.geeksforgeeks.org/get-post-requests-using-python/
VS Code: https://www.youtube.com/watch?v=B-s71n0dHUk
Postman + VS Code: https://www.youtube.com/watch?v=T79fxJzfgrM
Postman GET POST API Testing: https://www.youtube.com/watch?v=CLG0ha_a0q8

HTML CSS: https://www.youtube.com/watch?v=qz0aGYrrlhU
Javascript: https://www.youtube.com/watch?v=W6NZfCO5SIk
Why use React over Vanilla JS?: https://www.youtube.com/watch?v=yAbnoYfV99g
NextJS React: https://nextjs.org/learn-pages-router/basics/create-nextjs-app

[suryabulusu]

For those trying to run code locally, use the local_demo branch. I made a few edits to code from main branch. Hopefully, the basic functionality of the app should be up and running. Let me know if it is still failing at your end. https://github.com/avantifellows/quiz-creator/tree/local_demo

• Local .env file is as follows:

AF_DB_URL="http://localhost:3001"
AF_TOPIC_ARN=""
AF_BEARER_TOKEN=""
AF_ACCESS_KEY_ID=""
AF_SECRET_ACCESS_KEY=""

• Run json-server --watch sessions_db.json --port 3001 on another terminal. This starts the DB.

• PublishSNSMessage will not work. We can't create/edit sessions locally.

[nidakhanam]

Hey @suryabulusu, I'm keen on joining this project as a member of DMP24 and contributing.

[Vishnutyagi]

Hey @suryabulusu, i am interested to contribute in this project.

[soumya-maheshwari]

hi @suryabulusu

i pulled the code from local_demo branch but the app is not running.
what can be done next?

[ombhardwajj]

Hey @soumya-maheshwari , did you run json-server --watch sessions_db.json --port 3001 on another terminal before running npm run dev?

[soumya-maheshwari]

hi @ombhardwajj yes i run this command json-server --watch sessions_db.json --port 3001

[soumya-maheshwari]

hi @suryabulusu

i pulled the code from local_demo branch but the app is not running. what can be done next?

i forgot to add env file, now it's working fine
thanks :)

[soumya-maheshwari]

hi @ombhardwajj yes i run this command json-server --watch sessions_db.json --port 3001

yes it's working now
thank you

[sagarkori143]

I am facing these errors:


Can some one please help.
@ombhardwajj @suryabulusu

[ombhardwajj]

@sagarkori143 , are you sure you have cloned the local_demo and not the main/master branch?

[Madhu-mac]

Hi @suryabulusu
This is Madhu Lokesh, Currently working as a Full stack developer in a new-age startup "Drooid". I'm an Open-source enthusiast and also contributed to a few organizations previously. I have experience in MERN stack, Web dev & Mob Dev, and have worked with databases as well. I'm excited about the project, it aligns with my expertise & I want to know more about it.

I would love to collaborate and Contribute to "Avanti Fellows" and be a part of the community. Looking forward to discussing the project further.

Here's My portfolio: https://madhulokesh.netlify.app/
Resume: https://shorturl.at/aesS8

[sagarkori143]

Hey yes @ombhardwajj . I did clone the local_demo branch and still getting the error. Here is what I did:

• Cloned the local_demo branch
• created local.env file in root directory and pasted the content from Readme of repo
• run command json-server --watch sessions_db.json --port 3001
• then run command npm run dev in new terminal

Still getting this error:

[Nitish0777]

@sagarkori143 create .env not local.env

[sagarkori143]

@sagarkori143 create .env not local.env

It's working now. Thanks

[Nitish0777]

@suryabulusu sir,
we have to start from Acceptance Criteria or Goals & Mid-Point Milestone? and we have to continue this codebase or make the new one?

[Pankajjsuthar]

Hi sir, I have experience in working in MERN stack and CI/CD pipelines and also Prisma as an ORM. I am excited to start this project as part of DMP '24

[shubhamaltpi]

Hello Sir @ombhardwajj @suryabulusu I found one issue can i create new issue in issue section

[Vedanshi4]

hey @suryabulusu ,
I want to work on this project.

[suryabulusu]

hello all -- please join this discord server (channel #avanti-fellows) for more info: https://discord.gg/h9dmpa7p

[aanya-04]

Hey @suryabulusu, I'm very much curious about this project and would love to work with you as a member of DMP24 and contributing.

[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.

[rajanarahul93]

Hey @suryabulusu , happy to contribute to you project!!

[SUJALSINGH7473]

Hi @suryabulusu, how to add the filters, like first adding all the filters individually and then clicking on the filter should give me the result or while selecting for the individual filters it should give me the result?

[amamisha59]

hello @suryabulusu ,
I am amisha, 3rd year Computer science and information technology student. As an individual interested in UI designing and learning UX designing, I aim to contribute to the frontend development of the Session Creator platform. Leveraging my experience with HTML, JavaScript, and ongoing learning in React, I will collaborate with the team to enhance the UI/UX based on the provided wireframes.
looking forward to be one of the contributor to this project

[PayalKumari10]

Hello @suryabulusu ,
I'm excited about the project's alignment with my skills & experience, particularly in UI stack enhancement and creating a common component library. Proficient in the MERN stack with prior experience in crafting reusable UI components. I am currently finalizing my proposal and will be sending it your way shortly. I eagerly await the opportunity to collaborate with you and your team on this dynamic project to enhance the UI/UX based on the provided wireframes.

[SUJALSINGH7473]

@suryabulusu please review my pr, i have changed the functionality of search.
#49

[SUJALSINGH7473]

@suryabulusu please review my PR #52

[suryabulusu]

Weekly Goals

Week 1

• Setup repository and check if app works end-to-end

Week 2

• Improve existing UI and update constants files
• Pick dropdown values from database

Week 3

• Add liveclass session creation facility

Week 4

• Share application with internal team for testing
• Cater to issues found while testing and resolve them
• Clean the codebase for further tasks

Week 5

• Clean codebase for further tasks
• Make a note on polling DB for session updates

Week 6

• Allow for multi-select in batch selection
• Implement Polling
• Make changes in DB for polling

Week 7

• Take feedback from curriculum based on current application
• Make necessary UI changes to timing selections

Week 8

• Clear up bugs in session creation db-service
• Clean codebase and get it ready for unit/e2e testing

[Drish-xD]

Weekly Learnings & Updates

Week 1

• Task: Setup (Front-end, Backend, Databases)
• Learning 1: Learn about how the application is working including db-interactions.
• Learning 2: Learn about AWS SNS working for triggering the AWS Lambda function. AWS SNS Documentation
• Learning 3: Get to know about Elixir (functional programming language). Elixir Official Site

Week 2

• Task: UI improvements with ShadCn UI.
• Learning 1: Get to know about Next.js SSR and Server Actions for server-side API calling. Next.js SSR Documentation
• Learning 2: Explored ways to manage forms for easy maintenance and faster development.
• Learning 3: Created a Form Generator that uses a JSON form-schema, Zod-validator, and default Values to generate forms, simplifying creation and management.

Week 3

• Task: Working of Quiz and Live Classes Session
• Learning 1: Deep dived into db-services (repository) responsible for db-interactions.
• Learning 2: Created a filter in the present API endpoint to fetch sessions based on whether it's a quiz or not.
• Learning 3: Synced the application timing with the PostgreSQL DB.
• Learning 4: Completed the creation, editing, and duplication of live class sessions using Lambda.
• Learning 5: Handled default form values based on the selected Group (Auth_Group).

Week 4

• Task: Manual Testing (UI and functional)
• Learning 1: Verified that the build functionality met requirements.
• Learning 2: Resolved issues found during testing.

Week 5

• Task: Filters for the tables
• Learning 1: Learned about server filters, client filters, and their appropriate use cases.
• Learning 2: Explored TanStack Tables, focusing on pagination, column filters, and sorting state management.
• Learning 3: Optimized queries using Promise.all to call APIs in parallel and reduce response time.

Week 6

• Task: Multi-select & Polling API
• Learning 1: Deep dived into polling strategy to revalidate updated data on the UI.
• Learning 2: Gained knowledge on Zod validation, how form validations work, and how to refine them.

Week 7

• Task: Review/feedback from the tech and curriculum team.
• Learning 1: Explored ways to enhance UI usability and adaptability based on feedback from the curriculum team.

Week 8

• Task: Test Production sessions and start unit testing
• Learning 1: Learned about Jest for unit testing, focusing on testing the smallest unit of functionality individually. Jest Documentation
• Learning 2: Selected Jest to write test cases for components, hooks, and functions.

Week 9

• Task: E2E Testing Setup with Cypress

• Learning 1: Set up end-to-end (E2E) testing using Cypress to ensure that the application performs. This involved configuring Cypress that simulate real user interactions.

• Learning 2: Faced challenge with mocking server-side rendering (SSR) in Cypress. This issue involves ensuring that server-side logic is accurately represented in the E2E tests, and exploring solutions for effectively mocking SSR in the Cypress environment.

Week 10

• Task: Date Time UI Improvements as per the Reviews Collected

• Learning 1: Implemented improvements to the Date and Time UI based on feedback collected from reviews. This included separate Date and Time fields and adding internatinalization also.

• Learning 2: Set up custom commands in Cypress to streamline testing of form components. This involved creating reusable commands to handle interactions with inputs, selects, checkboxes, etc.

• Learning 3: Explored Github actions workflows of different repositories to setup an optimal workflow for this project.

Week 11

• Task: Take reviews from the team and alpha users to test the app and implement the feedback provided

• Learning 1: Interacted with the team and alpha users to gather feedback on the app. This involved understanding their perspectives, collecting detailed reviews, and identifying areas for improvement based on their input.

• Learning 2: Implemented the changes suggested in the reviews to enhance the app’s functionality and user experience. This process helped in addressing usability issues and aligning the app with user expectations and needs.

• Learning 3: Explored and implemented MSW (Mock Service Worker) for mocking SSR (Server-Side Rendering) requests. MSW allows intercepting and mocking network requests, providing a flexible way to test various scenarios without relying on live servers.

Week 12

• Task: Completed end-to-end (E2E) tests with CI setup

• Learning 1: Understood how to use MSW for SSR by setting up mock handlers to simulate server responses, which helps in testing server-side rendering flows effectively.

• Learning 2: Completed the E2E tests for the application, ensuring all critical paths and functionalities were thoroughly tested. This included validating user interactions and verifying that all components work together as expected.

• Learning 3: Finalized the Continuous Integration (CI) setup with GitHub Actions for automating code-checks, unit-test, and e2e-tests before merging changes to the main branch.

Week 13

• Task: Formatted code for consistency by adding Prettier and added documentation

• Learning 1: Integrated Prettier into the project to ensure consistent code formatting across the codebase. Prettier automatically formats code according to predefined rules, reducing formatting issues and improving code readability.

• Learning 2: Updated the documentation to include recent changes, ensuring that all new features, updates, and setup instructions are clearly documented for future reference and ease of use by the team.

[samr874]

@suryabulusu are the contributions still active for this project?