Task
Update navbar styles (client/src/components/Navbar)
After #109 is merged

More about the task (optional)
Signup button = size changes on hover, it should stay the same
Style logged in navbar

Alternatives you've considered (optional)
A clear and concise description of any alternative solutions or features you've considered.

Additional context (optional)
Add any other context or screenshots about the feature request here.

• Setup Mongo - hopefully done before 1 Oct
• Express - empty express app

with a couple of endpoints

• create: POST /api/links

• read: GET /api/links

• Mongo database schema for links

• Setup swagger

I will start with these

Task
What is the task?
Create (backend) error handling for invalid code

Task
Routing

• page when user logged in (home)
• redirects short links, e.g (https://shorti.onrender.com/vdgvao)
• auth (login/logout)

Task
What is the task? Adding api requests in the utils folder.

More about the task (optional)
This will happen client-side/front-end.
I'll use Axios for this.

Alternatives you've considered (optional)
A clear and concise description of any alternative solutions or features you've considered.

Additional context (optional)
Add any other context or screenshots about the feature request here.

Task
What is the task? [...]

More about the task (optional)
A clear and concise description of what you want to happen.

Alternatives you've considered (optional)
A clear and concise description of any alternative solutions or features you've considered.

Additional context (optional)
Add any other context or screenshots about the feature request here.

Task

• Add loading screen (e.g. when it takes 10s to load the frontpage because of network issues)
• add them to routing (client/src/app.js)

Suggested Method
Example:
https://github.com/chingu-voyages/v40-bears-team-37/blob/main/client/src/components/Loader/Loader.tsx
https://github.com/chingu-voyages/v40-bears-team-37/blob/main/client/src/App.tsx

Feel free to use any (better) method

Task

• backend auth tests (jest)
• update database to include timesClicked and url title

More about the task (optional)
A clear and concise description of what you want to happen.

Alternatives you've considered (optional)
A clear and concise description of any alternative solutions or features you've considered.

Additional context (optional)
Add any other context or screenshots about the feature request here.

Task
What is the task? Making api requests by using the functions in the services folder.

More about the task (optional)
This wil happen client-side/front-end

Task
Add prettier and possibly husky precommit to automate the process

More about the task (optional)
SHould work for both client and server

Task

new endpoints which needs to be added to swagger (api/docs)
register and login
/api/users/signup
/api/users/login

More about the task (optional)
server/docs.yaml

This might be useful
https://editor.swagger.io/

Task
Have a wireframe ready for 1 Oct

More Information
inspired by this project, https://www.frontendmentor.io/challenges/url-shortening-api-landing-page-2ce3ob-G
we will not copy the exact project as I feel like making our own will suit Hacktoberfest more

Task
Adding services in the frontend to use the backend create link endpoint
state management with contextAPI

More about the task (optional)
A clear and concise description of what you want to happen.

Alternatives you've considered (optional)
A clear and concise description of any alternative solutions or features you've considered.

Additional context (optional)
Add any other context or screenshots about the feature request here.

Task
Add steps to run project to Readme.md

Task
display shortened url in the input and change the button to a "copy" button. The short url would be
localhost:5173/{shortcode} on development
https://shorti.onrender.com/{shortcode} on live

Front page (not logged in)

Logged In

Task
Refactor the Landing page (src/routes/LandingPage.jsx)
Please wait till #109 is merged

More about the task (optional)

1. Create two components, one for logged in (A) and one for not logged in (B)
2. extract the "url entry form" into its own component so both A, and B can use it
3. render A, or B (on LandingPage component) based on wheter the user is logged in

Logged in

Not Logged in

Describe the bug

1. For example, google.com is valid in the frontend but not valid in the backend
2. some actual valid url is showing up as invalid on frontend (https://www.youtube.com/watch?v=06uXvfmyVI8&ab_channel=JoshuaFluke)

To Reproduce
press "shorten" button in the frontend, it will say it's valid but we get an error from the backend saying the url is invalid

Expected behavior
The checks should be consistent

Possible fix
use the same url validation package in the backend, we might have to find another url validation package

Task
What is the task?
Create a Component that will be used to render previously created shortened URLs

More about the task (optional)
A clear and concise description of what you want to happen.

Alternatives you've considered (optional)
A clear and concise description of any alternative solutions or features you've considered.

Additional context (optional)
Add any other context or screenshots about the feature request here.

Task
Style URL Shortening section.

Describe the bug
Cypress tests will occassionally fail due to timeout, re-running without any changes will sometimes pass

CypressError: Timed out retrying after 5000ms:cy.wait()timed out waiting5000msfor the 1st request to the route:getLinks. No request ever occurred.

Setting responseTimeout in cypress.config.js doesn't seem to work

To fix the issue we probably need to increase cy.wait() time out

Task
Why?
Currently, we are using the default html url validation, but it only accept links which starts with http or https
https://justmarkup.com/articles/2012-12-28-input-url/

Useful resources
suggested solution: add a regex or use a library or similar
https://www.tutorialspoint.com/validate-url-in-reactjs
https://www.npmjs.com/package/validator

Task
Edit url shortening section image according to the mockup.

• unclaimed task
• claimed task
  done

Figma: https://www.figma.com/file/SP0iLbONWkjZ0cTlpBwSPR/Shorti-Copy?node-id=0%3A1
Frontend: https://shorti.onrender.com/
Backend: https://shorti-server.onrender.com/

Must Have

• (database) setup mongo (mongoose) - basic setup will be done before 1 Oct
• url shortening
  • (backend) schema (mongo)
  • (backend) setup express
  • (backend) endpoint - create (long url to code)
  • (backend) endpoint - read (code to long url)
  • (database) add "timesClicked, urlTitle" to the Link Schema to match frontend (urlTitle should be optional, in frontend, user will be able to add a title if it was not set, timesClicked will be defaulted to 0)
  • (database/backend) link user and link objects - user would be optional as people are allowed to create links without logging in
  • (backend) endpoint - delete #13 #51
  • (frontend) component to enter url - still needs styling
  • (f) api call to create code from long url (#83)
  • (f) routing - if user goes to localhost:5173/short, the user should be redirected to the original url
    (backend /api/links/{short} will redirect)
  • (f) component to show previous shortened urls
• A design
• Style "Not Found" page
• Github documentation (on going)
  • readme (#21)

Should Have

• frontend tests (cypress) - new tests should be added for each new feature added
• backend tests (jest) - new tests should be added for each new endpoint
  • links
  • auth
• API documentation (Swagger or alternative)
• (frontend) authentication - state (contextAPI)
• (frontend) states for list of links (add, delete, edit etc) contextAPI
• landing page (desktop/tablet/mobile)
  • logo
  • nav bar/header bar - needs styling
  • signup/login buttons (normal, hover)
  • Feature Cards
  • Main area
  • hero component
  • footer - needs styling
  • social media icons (#11)
• user accounts - dashboard (so they can access/manage their old links)
  • (b) user schema
  • (b) probably use passport with jwt/google account/other account login strategies
  • (b) login endpoint
  • (b) register endpoint
  • (b) logout endpoint
  • (f) login api call
  • (f) register api call
  • (f) logout api call
  • (f) handle login state with maybe local storage
  • (f) Link Component (#12 )
  • (f) sort link list to show latest links first
  • (f) Groups Component (#47)
  • (f) Search
  • (f) filter
  • (b) implement groups
  • (b) implement search / filter
  • (b) update link schema to include number of times clicked

Components

Feature Cards:

Main area

Link Component

Groups

Good to Have / Additional Features

• custom short link
  • check reserved strings not to be used for custom short links (server/utils/reservedString.js)
• link should expire after a certain period of time (links have expiry dates, but they don't actually expire)
• track number times shortened url is clicked
• track referrer
• Error Boundary
• 404 page
• optional title on shortened link / link when displayed in account
• groupings of shortened links to create campaigns or themes
• share links / groups with other users by email (if doing any stats)
• permissions, view, edit, admin
• QR codes

TODO/ Code Improvements

• login, logout and signup buttons should be consistent (Styles, markup)
• TODO task in server/links.controller
• post response data should probably be consistent with get response (original_url -> url, short_url -> short)
  (links.controller, swagger, and tests need to be changed)
• improve error handling with a middleware or express-async-errors

Task
What is the task? Making the front end more like the example.

More about the task (optional)
Fixing background color.
Fixing URL shortening div color.
Fixing font colors.
Fixing website title.
Moving footer to bottom of page.
Adding borders.
Adding the text at the top of the page.
Adding links to the GitHub etc.

Additional context (optional)

Task
Add a section to contributing on how to pull latest changes, which should be done before every PR

More about the task

This should work

1. fetch from upstream
   git fetch upstream

2. pull upstream/main into current branch
   (on local branch) git merge upstream/main
   resolve conflicts if needed

Additional context (optional)
Preferrably after you have tested the above workflow, or familiar with the process

as suggested by the Hacktoberfest page

https://hacktoberfest.com/about/#low-or-non-code

Task
Style navbar according to the mockup.

Task
Add CSS styling to footer skeleton (without social media icons)

More about the task
There is already a Module CSS file set up and imported in Footer.jsx
Please wait for Pull Request #24 to be merged first.

Task
What is the task? [...]
create a component that can be used on groups or links for options menu that opens with ellipsis

More about the task (optional)
A clear and concise description of what you want to happen.

Alternatives you've considered (optional)
A clear and concise description of any alternative solutions or features you've considered.

Additional context (optional)
Add any other context or screenshots about the feature request here.

WHAT

• Add ./server/docker-compose.yml that can be used to run a local dockerized instance of MongoDB for development & testing

WHY

• Provides an alternative, convenient method for using MongoDB

HOW

• It would be similar to this:
  

Task

Add passport-google-oauth20 strategy

Task
Add tests for backend (jest)

Task
Create footer component (without social media icons)

Task
API to get logged in user profile and also populate his/her links.

More about the task (optional)
Only user can see their profile and links.

Task
What is the task? [...]

More about the task (optional)
Create a copy button that can display as just icon or icon and text. On click it copies the corresponding shortened link to clipboard.

Will be used on each shorted Link line item & in Input/button shorttener component

Alternatives you've considered (optional)
A clear and concise description of any alternative solutions or features you've considered.

Additional context (optional)
Add any other context or screenshots about the feature request here.

Task
Add navbar

Task
What is the task? Creating and using a style guide

More about the task (optional)
It could contain things like when to add a newLine etc.

Task
Create URL shortening component (frontend)

Task

new endpoints which needs to be added to swagger (api/docs)
delete links
DELETE /api/links/{short}

response
"success": boolean
"message": string

More about the task (optional)
server/docs.yaml

This might be useful
https://editor.swagger.io/

Task
return the full url given the short code

More about the task (optional)
api endpoint

Task
What is the task? [...]

More about the task (optional)
A clear and concise description of what you want to happen.

Alternatives you've considered (optional)
A clear and concise description of any alternative solutions or features you've considered.

Additional context (optional)
Add any other context or screenshots about the feature request here.

App name will be Shorti
Discussion #15
Please communicate with the design team if you want to work on the logo

Task
creating button component and styling according to the mockup

Task
Style footer according to the mockup.

Describe the bug
When the long url starts with http://..., the redirected page would be http// (colon is missing)

To Reproduce
Steps to reproduce the behavior:

go to http://localhost:5173/adgcxh

Expected behavior
should be redirected to https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration

Screenshots

Additional context
might need to replace the colon with \\: ??
also, the whole redirection seems to be broken on the live site

Task
What is the task? Adding the possibility to write your own short link (for example with bit.lies: bit.ly/Riverz instead of bit.ly/HfDMoP).

More about the task (optional)
I'm only planning to add this option server-side/back-end.

Alternatives you've considered (optional)
A clear and concise description of any alternative solutions or features you've considered.

Additional context (optional)
Add any other context or screenshots about the feature request here.

User accounts (so they can access/manage their old links)

• (b) user schema
• (b) probably use passport with jwt/google account/other account login strategies
• (b) login endpoint
• (b) register endpoint

Task
What is the task?
Create (backend) endpoint to delete previously shortened URLs

More about the task (optional)
A clear and concise description of what you want to happen.

Alternatives you've considered (optional)
A clear and concise description of any alternative solutions or features you've considered.

Additional context (optional)
Add any other context or screenshots about the feature request here.

To include new name and stuff, it looks pretty outdated and not so professional

Suggestion: Find a nice readme.md template and apply it to our readme file

assigned to blanketmanatee

Task
What is the task? [...]

More about the task (optional)
A clear and concise description of what you want to happen.

Alternatives you've considered (optional)
A clear and concise description of any alternative solutions or features you've considered.

Additional context (optional)
Add any other context or screenshots about the feature request here.