[C4GT] Frontend and Deep Linking

[ChakshuGautam]

Project Details

YAUS (Yet Another URL Shortener) is a batteries included URL Shortener that is designed for speed and scalability.

Features to be implemented

YAUS frontend was created last year at C4GT. There is a repo that already exists for this here - https://github.com/codeakki/YAUS-C4GT. The repo needs to be integrated back, integrated with the development env and deployment scripts. It should also get deployed to Vercel for management of the production environment. Along with this additional features need to be implemented.

• Move this repo to current monorepo.
• Integrate with local dev env, Gitpod and deployment scripts.
• Features to be added on UI
  • Link Management (Already there in existing repo)
  • Dashboard for Usage (Already there in existing repo)
  • Expiry Management (Also see Expiry for Links #22)
  • Embed Telemetry Dashboard (Also see Adding Telemetry support to Yaus #49)
• Status Page #18
• RFC: Additional KV Data to Links #21
• RFC: Deep LInking #25
• Documentation
  • Monorepo Setup Documentation #19
  • Docusaurous Website using this theme
• Setup CI #53

Learning Path

Complexity

Medium

Skills Required

Typescrcipt, Nx, ReactJS, NestJS, Hasura.

Name of Mentors:

@Shruti3004

Project size

8 Weeks

Product Set Up

See the setup here

Acceptance Criteria

• Unit Test Cases using Jest for backend and React Testing Library for frontend
• e2e Test Caes using Playwright
• Swagger Doc/Postman Collection for relevant APIs

C4GT

This issue is nominated for Code for GovTech (C4GT) 2023 edition.
C4GT is India's first annual coding program to create a community that can build and contribute to global Digital Public Goods. If you want to use Open Source GovTech to create impact, then this is the opportunity for you! More about C4GT here: https://codeforgovtech.in/

[AbhayBhan]

Hello, I would like to enquire the whole Installation Procedure of the following, The Repositories do not mention anything about Installation, I have tried cloning & installing dependencies, but without a central node script to run all packages concurrently, I am confused how to begin. Please Clear up on this.

[VishalZ123]

Hey @ChakshuGautam
How do I setup the repo, would you please provide the setup steps?

[ChakshuGautam]

Hey @yuvrajsab is updating the readme docs right now. It will be done in an hour.

[yuvrajsab]

Installing instructions have been added to the readme. https://github.com/Samagra-Development/yaus#installation

[Harshit-Raj-14]

Hello, @ChakshuGautam !

I just went through the issue and am looking forward to submitting a proposal for the project. I deal regularly with front-end tasks, I am proficient with react and javascript, I have some UI/UX knowledge and I am eager to work on this project. I am really looking forward to working on this project and it would be great if you could give feedback on the proposal.

I would like to work on this project as soon as possible. Request you to assign me some good first issues.

Thank You!!

[ChakshuGautam]

Hey @Harshit-Raj-14 glad to have you here. If you want to contribute directly you can go ahead and start with this PR - fork it and make the changes that are requested. Given it's a large PR multiple folks should work on it.. @Shruti3004 would be guiding you on it.

One minor correction, it's deep "linking" and not deep "learning".

[Rohanxmalik]

Dear Mentor,
@ChakshuGautam

I hope this message finds you well. I am excited to contribute to the YAUS project under C4GT. Thanks to my previous internship experience, I am familiar with technologies like MERN (MongoDB, Express.js, React.js, Node.js) and TypeScript, which I believe will be valuable for this project. I am confident in my ability to make meaningful contributions to the project.

To begin, I would like to set up the project locally so that I can gain a better understanding of the codebase and make some minor contributions initially. Could you please guide me through the process of setting up the project environment on my system? I have reviewed the existing repository for the YAUS frontend (https://github.com/codeakki/YAUS-C4GT) and understand that it needs to be integrated back into the current monorepo. I would greatly appreciate your assistance in integrating it with the local development environment and deployment scripts. Additionally, if there are any specific instructions or requirements for the project documentation, please let me know.

Regarding my contributions, I will focus on implementing unit test cases using Jest for the backend and React Testing Library for the frontend. I will ensure that the tests cover the critical functionality and provide reliable test coverage. Furthermore, I will document the codebase by writing clear comments and updating the README files with setup instructions, API endpoints, and any other relevant details. This will help developers and users understand the project better.

If there are any specific documentation requirements or expectations, please provide me with the necessary information and resources. Although I am not familiar with Docusaurus, I am willing to learn if a documentation website is needed. However, I am equally committed to delivering well-documented contributions within the project itself.

I am eager to begin working on the proposal for YAUS project and start contributing to the project. Look forward to your guidance and support throughout the process.

Best regards,
Rohan Malik
rohanxmalik@gmail.com

[ChakshuGautam]

Hey @Rohanxmalik I already see two PRs doing the same thing. I would believe that working together with either one of them would lead to the closure of this ticker. I would recommend not starting this from scratch and use either of the PRs (whichever you think is more advanced)

• Yaus app frontend added  #64
• Added YAUS frontend developed in C4GT"22 #56

I would also recommend others not create any new PRs and collaborate with existing contributors. Thanks.

[kineticdesigner42]

Hello 👋

My name is Siddhant and I am a student, interested in UI/UX design. While I won't be applying for the C4GT internship, I would like to contribute as a volunteer to improve design in open source projects.

On this project (YAUS) - I went ahead and created a UX design for the expiry management of links feature.
You can view the Figma walkthrough here

This design extends the current UI of YAUS to include the following features -

• Expiry Status
• Edit Expiry Status
• Campaign Folders (I added this additional feature, since from an end user perspective people would be viewing links as part of a campaign instead of uncategorized links alone)

Please do give me feedback so that I can improve the design and make this useful for YAUS.

In case anyone would like to make the design more visually appealing, I could experiment with some other UI styles too. You can look at neomorphic, glass and flat design examples here and a minimalistic example here on my portfolio.

Sincerely,
Siddhant

[ChakshuGautam]

Hey @kineticdesigner42 this looks great!! Is it okay if you create a PR for this on the main branch? This will allow for Design to have its own place in the repo. For now, we can just have a design.md in the base folder and continue iterating over there.

Let me know your thoughts on this.

[kineticdesigner42]

Hi @ChakshuGautam

Thank you for the comment, I have created a pull request (#66). Please do take a look and let me know if I should make any changes.

[Bigguysahaj]

@ChakshuGautam I want to work on the setup CI issue, where should I piggy back off of?

[ChakshuGautam]

@ChakshuGautam I want to work on the setup CI issue, where should I piggy back off of?

Hey you can start with detailing this ticket out and verifying with the mentor is this is the right direction for thie project. I can share my broad understanding of this. Long term we want to solve two things

• Make it easier for contributors for contribute
• Provide visibility when a newly added code is causing regressions

[Nazi-pikachu]

Weekly updates [ 1st July - 12July]
Progress till now

1. Frontend Migrated to monorepo
2. Migrated to react-router-dom v6
3. Fixed few pages for responsiveness
4. Refactored the entire Frontend as per the standards
5. Deployed to vercel to ease tracking

[Nazi-pikachu]

Hello 👋

My name is Siddhant and I am a student, interested in UI/UX design. While I won't be applying for the C4GT internship, I would like to contribute as a volunteer to improve design in open source projects.

On this project (YAUS) - I went ahead and created a UX design for the expiry management of links feature. You can view the Figma walkthrough here

This design extends the current UI of YAUS to include the following features -

• Expiry Status
• Edit Expiry Status
• Campaign Folders (I added this additional feature, since from an end user perspective people would be viewing links as part of a campaign instead of uncategorized links alone)

Please do give me feedback so that I can improve the design and make this useful for YAUS.

In case anyone would like to make the design more visually appealing, I could experiment with some other UI styles too. You can look at neomorphic, glass and flat design examples here and a minimalistic example here on my portfolio.

Sincerely, Siddhant

Hey @kineticdesigner42 if you are still intereseted in contributing maybe you can have a look at this ticket #88 . Let me know if you need any help or clarification with this ticket.

[Nazi-pikachu]

PRs as part of C4GT

• feat: Added dynamic query params and intent for deep linking #97
• feat : added Custom posthog events in backend #93
• feat: Added contributors in readme #89
• Feat : Added frontend telemetry support #87
• Fix : Added sample.env file #86
• Feat(Link-expiry): Added link expiry using redis #83
• Migration : Frontend #77

Features left

• CI setup
• Status Page