• Modular Grid Page
  • About
  • Features
  • Todo Features
  • Tech Stack
  • Getting Started
  • Installation
  • Usage
  • Modules
  • API features

A side project I created to use everyday. Started with just needing a search bar to quickly search on different sites and unfolded to experimenting with many different modules.

• Add light/dark mode
• Replace TDAmeritrade API with other financial API
• Fix solar chart axis (and other various bugs)
• Add CMS for bookmarks
• Make customizable on front end

• react frontend framework
• tailwindcss css framework
• vite javascript build tool

The weather feature of this page requires you to add an API Key. First create a .env file in the root of the project directory. Then add this variable to the file with the API Key.

# open weather map API
VITE_OPEN_WEATHER_MAP_API_KEY={YOUR_KEY}
VITE_OPEN_WEATHER_MAP_UNIT={imperial_OR_metric}

# TDA API
VITE_TD_CONSUMER_KEY={YOUR_TD_AMERITRADE_API_KEY}

# unsplash API
VITE_ACCESS_KEY={YOUR_UNPLASH_ACCESS_KEY}
VITE_SECRET_KEY={YOUR_UNPLASH_SECRET_KEY}
VITE_UNSPLASH_PHOTO_CATEGORY={PHOTO_CATEGORIES}

# location, leave empty to use the browser Geolocation API
VITE_LAT={YOUR_LATITUDE}
VITE_LON={YOUR_LONGITUDE}

# API key for news api https://newsapi.org
VITE_NEWS_API_KEY={YOUR_NEWS_API_KEY}

# browser preference 
BROWSER={PREF_BROWSER}

1. Clone the repo in the directory of your choosing.

   git clone https://github.com/timothypholmes/startup-page.git

2. Navigate to the root of the directory and run the following command.

   npm install

3. To compile the site run the following npm command.

   npm run build

This start page was built with the reactJS framework. To test the page run the command:

npm start

To build the page run the command:

npm run build

and link the static index.html local file to your browser preferences (open on new tab and open on new window)

Or run it using:

serve -s build

• solar graph displays suns angular elevation, animated to show sunset and sunrise
• clock displays time and day
• weather current weather conditions and temperature using openweather
• images displays a random sort of pictures using unsplash
• stockprice displays intraday stock data using tdameritrade
• bookmarks displays list of bookmarks

• tdameritrade - stock charts, option chains, account balance
• openweather - Temperature with weather emoji
• unsplash - Random photo squares