Starter Tab

VideoPreview.mp4

I was getting sick of the same old new tab page. I wanted to have a dashboard for everything I reach for in my typical workday, so I built it.

StarterTab is here to revolutionize the way you start your day on the internet. With a completely customizable webapp to replace your new tab homepage, you can personalize your online experience like never before.

You can install the chrome extension here, or the firefox extension here and make StarterTab the site that opens up on every one of your new tabs.

Tech

Local storage is being used for storing all of your customizations, meaning you own your data! All of the settings, tokens and themes sit on your own browser. Some may call it laziness that I don't want to maintain a database, you could also see it as me helping prevent your data being in yet another cloud service.

Written in NextJS with CharkaUI. Hosted on Vercel.

Current API Integrations

• Strava API for my swims/runs for the week
• Spotify API for Spotify controls and your favorite artists
• Weather API for the weather data for my city
• Hacker News for the top ask posts for the day
• Stocks API for the stick ticker info
• Twitter API for your feed
• Google Calendar API for your Google Calendar
• Microsoft Outlook Calendar API for your Outlook calendar

Future API Integrations Ideas

• Public transport provider

Getting Started

1. Clone the repository and install dependencies

git clone https://github.com/allister-grange/startertab.git
cd startertab
yarn install

2. Configure your local environment

Copy the .env.local.example file in this directory to .env.local (which will be ignored by Git):

cp .env.local.example .env.local

Add details for all providers you want to use:

STRAVA_CLIENT_ID=<YOUR_SECRET_HERE>
STRAVA_SECRET=<YOUR_SECRET_HERE>
WEATHERAPI_TOKEN=<YOUR_SECRET_HERE>
SPOTIFY_CLIENT_ID=<YOUR_SECRET_HERE>
SPOTIFY_CLIENT_SECRET=<YOUR_SECRET_HERE>
FINNHUB_SECRET=<YOUR_SECRET_HERE>
TWITTER_CLIENT_ID=<YOUR_SECRET_HERE>
TWITTER_CLIENT_SECRET=<YOUR_SECRET_HERE>
TWITTER_CODE_CHALLENGE_KEY=<YOUR_SECRET_HERE>
TOKEN_ENCRYPT_KEY=<YOUR_SECRET_HERE>
OUTLOOK_CLIENT_ID=<YOUR_SECRET_HERE>
OUTLOOK_CLIENT_SECRET=<YOUR_SECRET_HERE>
GOOGLE_CLIENT_ID=<YOUR_SECRET_HERE>
GOOGLE_CLIENT_SECRET=<YOUR_SECRET_HERE>
ANALYTICS_ENABLED=<true or false>

3. Start the application

To run your startertab locally, use:

yarn dev

To run it in production mode, use:

yarn build && yarn start

Adding in a New Tile

1. Create your new Tile component in the src/components/tiles folder. Make sure to accept a 'tileId' prop, this enables you to change the color of the text based off the settings changed in the sidebar.

type PageProps = {
  tileId: TileId;
};

export const YourNewTile: React.FC<PageProps> = ({ tileId }) => {
    const color = `var(--text-color-${tileId})`;

  return ();
}

2. Add your tile type to the TileType in src/types/settings.ts.
3. Add your new tile into the corresponding sizes you want available for your tile in the switch statement for tileSize in src/components/sidebar/TypePicker.tsx
4. Add your tile type to the switch statement for the tileType in src/components/TileContainer.tsx
5. If you want to add in persistent storage to the tile, use Recoil. Look at how another tile uses a FamilySelector and the useRecoilState hook