A simple and customizable startpage built using React.

For developers

This page is currently hosted on netlify. But if you want to load this faster, I reccomend to do the following

Run locally

1. clone/download this repo
2. install project dependencies by running

yarn

3. build the static files

yarn build

4. serve the static page

serve -s build -l <PORT_NUMBER>
# or
serve /path/to/build -l <PORT_NUMBER>

NOTE: this starts a static server process locally on your machine. This processed will be killed every time you turn your computer off.

You may need to create a script(step 4) which runs everytime your machine is booted up.

5. Get the browser extention for firefox or chrome
6. set the new tab url to be where the page is served

Development mode

Simply clone the repo, install dependencies then

yarn start

Some Info

This webapp needs to load quickly as its ment to be a part of a user's workflow. Therefore, the data for this app is stored in the localStorage. Which:

• provide a quick access to render user shorcut links
• allow faster development, with out the need of a backend server or a database

The general structure of the data stored in localStorage

[
    { 
        categoryLabel: "categoryName",
        urlList: [
            { 
                text: "Link name",
                url: "Link url"
            }
        ]
    }
]

Personal's Note

Alright I'm pretty much done with this project, but here are a few aspect I could improve on:

• Plan out ui components better before coding, I find myself copy/paste or rewriting code alot (just to make components reusable)
• use regex to handle input validation
• Handling states better
  • use redux in bigger projects
  • use context in smaller projects. In this one I find myself passing state down the prop tree quite alot

Refactoring TODOs

Adding classes to set a standard model for stored data. why? to set a standard and make maintenance easier

• refactor old code to use class
  • add category
  • [-] add link
  • update link
  • delete link
• refactor old code to use the class's pre-defined function

Ignoring above to do a complete rewrite, using context

Setup Routes

• this removes the need for active page boolean
• remove that conditional rendering nonsense in App Component

Setup Context

• this is needed to use classes
• passing down via props is fugly