ngoakor12 / coding-resource-finder Goto Github PK

Heroku is getting rid of the free plan, so an alternative is needed before 28 Nov 2022. It preferably needs to have a generous free tier of cheap.

• I've heard so much about Railway, so that should be the first place to look I guess
• Vercel

Go over the frontend code checking for patterns in the project or borrow some from other projects' style guides(e.g. airbnb style guide)

• create a STYLEGUIDE.md file in the ./frontend folder
• take the info you've gathered from the research and add it to that file. It doesn't have to be a whole blog post, contribute with whatever you can and we can discuss it

• Finalise colours and create lightmode counterparts
• #119
• Design mock up of the light mode
• Implement lightmode

This specific component is buggy and doesn't fit the site, I'm removing this and opting for a filtering system like the on for topics below the search bar.
Tasks:

• On the UI, remove this part:
  
• In App.js, remove the related routes
• reset the resources route to just be /resources and not /resources/all
• update Context.js to make sure all types of resources are fetched
• update the /resources route page title from Resources - All | Coding Resource Finder to just Resources | Coding Resource Finder

add a number indicating the number of resources at a point in time at various places on the site.

Tasks:

• add a count on the resources nav option
• add a count on the bookmarks nav option
• add a count on the load all resources button

Tasks:

• create a pages folder in the ./src folder
• move the Resources and Bookmarks components into the pages folder, making sure that everything is still working

Functions to test:

In ./backend/src/format-resources.js

• getPages()
• getPageData()

In ./backend/src/utils.js

• getCurrentCollectionName()

In ./backend/src/scrape-resources.js

• getHTML()
• getTopicsFromACN()
• getProjectsFromACN()
• getAllResources()

The current current nav bar behavior is exactly what must be emulated/copied.It utilizes the css sticky position property. So what must happen is that we should be able to scroll until the search bar reaches the top from which it must then stick there like the nav bar.

Is your feature request related to a problem? Please describe.
Yes, looking for just topics and or just projects can be a pain sometimes.

Describe the solution you'd like
Add resources filters chips just below the search form where I can filter by resource type (projects, topics and all)

Describe alternatives you've considered
Adding pages for each reasource type but it was too messy

Additional context

Is your feature request related to a problem? Please describe.
When I search for a resource I sometimes just want to browse topics and other times projects.

Describe the solution you'd like
Tabs in resource page, above or below the search input and filter shortcuts named: all, topics, and projects

Describe alternatives you've considered
An alternative solution would be to extend the search feature to search by resource type.
Another was to add a shortcut like the topics shortcuts.

Additional context
Mockup below. Figma file can be found here

Is your feature request related to a problem? Please describe.
Yes, I need to have designs ready before I can let people work on features

Describe the solution you'd like
Use Storybook to help with visualizing components without worrying about data and functionality. That way others can sort of work on the designs aswell and implement them as components

Describe alternatives you've considered
I keep making designs for things to be implemented and then allow others to work on things when the designs are finalized which is not very sustainable

Additional context
At least one component should be added to the storybook to show that everything works as expected. You can ask me if you want a component to implement.

Is your feature request related to a problem? Please describe.
Not necessarily, this is aimed at providing consistency and enforcing patterns in the codebase regarding code style.

Describe the solution you'd like
Add a .prettierrc file, possibly a .prettierignore file and and an .eslintrc file

Describe alternatives you've considered
NIL

Additional context
NIL

I'll like to work on this.

Here's what happens at the moment:

1. On load/ first render

• first page of visited resources are fetched and all resources are fetched concurrently.

2. clicking "Load 20 more resources" button

• another api call for a page of requested resources is fetched.

Heres what should happen instead:

1. On load/ first render for each of all, topics, and projects:

• first page should be fetched
• all resources matching that page(either all, topics, or projects) should also be fetched concurrently(to make it easier to search all not just first page)
  NOTE: use promise.all syntax(unless you have a reason not to)

2. clicking the "Load 20 more resources" button should be removed

Describe the bug
Dev url is displayed instead of prod url on the root endpoint

To Reproduce
Steps to reproduce the behavior:

1. Go to https://coding-resource-finder-api.herokuapp.com/
2. Look at the available endpoints

Expected behavior
The root endpoint is not supposed to show any localhost base url for the endpoints. The base url should be https://coding-resource-finder-api.herokuapp.com/

Additional context
There's nothing wrong with the actual endpoints, they're working fine but they should not display localhost base url in prod.

The current feature request template has a few sections shown by bolded text and a small description of what that section expects.

Problem:
The description of what a section expects stays there and doesn't go away if you choose not to edit or delete it.

Proposed fix/solution:
Change the descriptions to be markdown comments instead, that way every section is still explained but disappears after you submit the issue

Is your feature request related to a problem? Please describe.
No, but sometimes you want to work with resources from other places on the internet but in the coding resources finder ecosystem

Describe the solution you'd like
Have the ability to add external resources and manage them on the site

Describe alternatives you've considered
Use other sites for and their resources but it's not the same as this site

Additional context
Have an add resource icon which opens a modal with a resource title and resource type.
Design mockup is still to be added.

Is your feature request related to a problem? Please describe.
No

Describe the solution you'd like
Add a select element just below the search bar to choose what order the resources appear in (ascending or descending)

Describe alternatives you've considered
N/A

Additional context

Tasks:

• add some replacements to the pictures on readme.md
• add as many screenshots as you can in ./docs/screenshots.md

There are two api calls that occur when you first visit https://coding-resource-finder.ngoako.dev/:

• all resources: https://coding-resource-finder-api.herokuapp.com/all
• first page of all resources: https://coding-resource-finder-api.herokuapp.com/all/1

Task

• refactor those api calls that occur on page load to use Promise.all syntax

Describe the bug
Direct access via this url BASE_URL/resources/projects renders all resources instead of just projects
To Reproduce
Steps to reproduce the behavior:

1. Type: BASE_URL/resources/projects in the address/search bar
2. Observe the resources rendered, they're are mixed with topics

Expected behavior
When you visit the url: BASE_URL/resources/projects, the resources rendered should only be projects

Additional context

• When accessing the projects via clicking the "projects" tab/nav link, the rendered resources are as expected
• BASE_URL is in production https://coding-resource-finder.ngoako.dev/. spinning the backend in localhost will result in the BASE_URL being http://localhost:3000

JSDOM is a whopping 2.4m (gzipped: 588.6 k) in size. It's only used for web scraping in this project, so it's a bit of an overkill and not worth it imo. Cheerio seems like the best lightweight alternative with the only drawback being the syntax from what I've seen so far.

Task:

• Replace jsdom with cheerio web scraping
• Uninstall jsdom

Here's what it looks like now:

Make sure it's responsive and doesn't spill text.

NOTE: keep the pages on one line even on mobile. Don't stack the pages.

Hi @Ngoakor12 !

STR:

1. open root page
2. open dev tools
3. go to network tab
4. observe extra requests to /all route

Is your feature request related to a problem? Please describe.
Yes, accessing an unavailable page on the website sort of just breaks/show a blank main section.

Describe the solution you'd like
Create a 404 placeholder page for when a certain page doesn't exist. It should link to the home page.

Describe alternatives you've considered
One alternative I've considered is having a redirect to the homepage for pages that don't exist, but I think it's not user friendly since the user wants to go some place and you just keep redirecting them without a reason.

Additional context
Mockup design still to come

Tasks

• Design the look of the page
  
  You can find colours, font sizes & styles and dimensions on this figma file
• Implementation
  • #143
  • #144

Store links in a database. This is will mean less reliance on the original website.

The current resources.js file contains a lot of resources related function but they need to be put in separate files so that the github actions script can run the database update script.

• #18
• #19
• #21

Tasks

• create screenshots.md in ./docs and add as many screenshots as possible
• create codebase.md in ./docs and add a clear description of the codebase for newcomers

The issue is mostly self explanatory.

• Use this icon/svg (green icon) from this site.
  

• Follow the current procedure of dealing with svgs's by adding them ti the svgs.js file and import it to wherever you want to use it from that file.

• Mockup design:
  
  Note the drop shadow, go to the figma file for colour and dimension accuracy

The alignment of the clear search button is off centered/funky(see screenshot below). Fix it's positioning by centering it horizontal with the search field.

The current bug report template has a few sections shown by bolded text and a small description of what that section expects.

Problem:
The description of what a section expects stays there and doesn't go away if you choose not to edit or delete it.

Proposed fix/solution:
Change the descriptions to be markdown comments instead, that way every section is still explained but disappears after you submit the issue

Replace text: "Loading Resources..." placeholder when fetching resources with resources skeleton components.

Design
Initial colours

final colours(as it loads)

The colour of the cards should change in an infinite smooth-blinker-like animation where one colour fades into the other. Exact styles can be found here

What to do:

• throw errors when you can handle them
• use try catch for code that's likely to fail sometimes
• try and catch errors on the upper layer where you'll more likely know what to do with them

What to not do:

• chucking multiple lines of code in try catch statements
• re-throwing all caught errors everytime

Need to do some research on css styling in a react app first

Task:

• choose a css styling approach to go with
• make use of css variables
• use the right units(font-size and media queries)

Current reasons to move away from firestore:

• cannot update db via github actions
• cannot impose a limit and turn off db when a certain budget is reached. Unlimited writes means you will owe unlimited money.
• not free

Where to?

• Mongodb
• SanityCMS
• Railway's PosgresSQL

Is your feature request related to a problem? Please describe.
Yes, loading even though something went wrong on the server can be frustrating.

Describe the solution you'd like
Create a page to redirect to when there's an error while fetching resources from the server. This page will work like the chrome error connecting page.

Describe alternatives you've considered

Additional context
Design mockup still to be added

Tasks

• Design the look of the page
  
  You can find colours, font sizes & styles and dimensions on this figma file
• Implementation
  • #141
  • #142

Tasks:

• Learn about how to build and deploy swagger api documentation
• Decide on a free way to host the interactive swagger api documentation(e.g. github pages)
• Update the current swagger documentation to add the new hosted api docs url

Whenever a PR is made, a pull request template should prefill the title and description fields, but it does not show up. Poke around and see if you can find the problem with the template and a fix for it.

Resource to help:

• https://www.youtube.com/watch?time_continue=26&v=UPsCXqxxJUA&feature=emb_title
• https://www.youtube.com/watch?v=18E6o-YiP4o

Describe the bug
Navigating to different pages via clicking links does not change the page's title, while navigating to a page by typing the specific url in the address bar works.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://coding-resource-finder.ngoako.dev/resources/all
2. Click on either "topics" or "projects" navigation buttons/links
3. Observe the title of the page: it will still say "Resources - all | Coding Resource Finder"

Expected behavior
Clicking any nav link should also change the website title accordingly

Move to ./backend/src/svgs.js

Icons to move;

• bookmark and remove bookmark icons found in ./frontend/src/components/ResourceList.js
• remove bookmark icon found in ./frontend/src/components/BookmarkList.js
• clear search icon found in ./frontend/src/components/SearchForm.js

The white/grey-ish scrollbar looks really out of place currently, make it fit in.

Have a look at the routes in ./backend folder. Edit the readme.md file with some info about the routes exposed by the server.

Add a table with the following column headings; method, endpoint, params, description, return type. You can play around with the order of the columns, not sure at the moment.

Currently the file only contains info on how to run the project locally. Some ideas on sections to include and what info I think should be mentioned:

• Running the project locally
  • Cloning the repo
  • Running the backend
  • Running the frontend
• Opening an issue
  • Search through the open issues and add one if you don't find it anything related.
  • Search through the closed/merged issues and if an issue you want to open has a merged PR, then reopen that issue with details on why you think the issue was not addressed.
  • Add labels related to your issue
• Opening a PR
  • Ask to work on an issue if you want to open a PR related to an issue, that way you can be assigned and others know you're working on it
  • Avoid opening a PR without an accompanying issue, so maybe open an issue to discuss if what you want to add to the project will be welcomed before you write complex features that may or may not be merged
  • Link issues related to your PR via the PR template or the development section on the right sidebar