Snow Mountain Tracker is a free-to-use application that provides real-time snowfall updates, secure ski lift booking, and trip coordination tools for skiing enthusiasts, resort managers, and casual tourists.
- backend/: Node.js/Express server for API endpoints, database integration (MySQL), caching, and third-party services.
- frontend/: Next.js (React) application using Mapbox GL JS and Chakra UI for an interactive map-based UI.
These instructions must be followed to utilize the APIs, for security reasons the API keys will not be displayed to the public.
Follow the steps below to recreate the ".env" files
Everywhere you see a ".env.example" or anything similar, you will remove the ".example" part of the file and input your own secret/personal API keys in there. Listed below are all the locations of the .env files that you must edit/fill in with your API keys and other information.
Mapbox API (Map): https://www.mapbox.com/
IP Info (Gelocation): https://ipinfo.io/
Visual Crossing API (Weather): https://www.visualcrossing.com/weather-api/
MySQL (Database): https://www.mysql.com/
- Root Directory
/.env.example -> /.env
NEXT_PUBLIC_MAPBOX_API_KEY=your_mapbox_key_here
- Frontend Directory /frontend
/frontend/.env.local.example -> /frontend/.env.local
NEXT_PUBLIC_MAPBOX_API_KEY=your_mapbox_key_here
NEXT_PUBLIC_API_URL=http://localhost:5000
- Backend Directory /backend
/backend/.env.example -> /backend/.env
PORT=5000
IPINFO_TOKEN=ipinfo_token_here
VISUAL_CROSSING_WEATHER_API_KEY=visual_crossing_weather_api_key_here
NODE_ENV=development
DATABASE_ENABLED=false
MYSQL_HOST=mysql_host_here
MYSQL_USER=mysql_user_here
MYSQL_PASSWORD=mysql_password_here
MYSQL_DATABASE=mysql_database_here
- Install Docker
Depending on what OS you use, check the link here: https://docs.docker.com/get-started/get-docker/
Note - on Windows, ensure you have added the bin folder of Docker as a system path.
Enviornment Path (example):C:\Program Files\Docker\Docker\resources\bin - Navigate to the root directory of this project
backend/ database/ frontend/ - Run the following command:
docker-compose up --build - Visit the following webpage to view the frontend (main entry) of the web application: http://localhost:3000/
Visit the following webpage to view the backend (debugging) of the web applicaiton: http://localhost:5000/
- Navigate to the
backend/folder. - Run
npm installto install dependencies. - Create a
.envfile with your API keys and database connection details (see sample). - Start the server with
npm run devfor development ornpm startfor production.
- Navigate to the
frontend/folder. - Run
npm installto install dependencies. - Create a
.env.localfile with your Mapbox token. - Start the development server with
npm run dev.
- Local: Use the above instructions to run both backend and frontend locally.
- EC2: Deploy the backend (Node.js/Express) on an AWS EC2 instance (or via Docker/AWS Elastic Beanstalk). The frontend can be deployed on Vercel or AWS Amplify.
- Network Routing: Use Nginx as a reverse proxy to route requests to the backend and serve static assets.
- CI/CD: Use GitHub Actions or AWS CodePipeline for automated testing and deployment.
- Use MySQL to store booking data and other application data.
- Update the
DATABASE_URLinbackend/.envwith your MySQL connection string.
- Visual Crossing (Weather API): Limit at 1K per day
- Mapbox (Map API): 50K total
- IPInfo (Geolocation lookup - locate me feature): 50k lookups per month. No additional lookups
- The frontend built with React/Next.js can share components with a React Native mobile application for easy porting to iOS.
- Initial Setup (Weeks 1–2):
- Finalize project requirements, gather API keys, and set up development environments.
- Configure Git repository and project management tools.
- Frontend Development (Weeks 3–4):
- Build the basic UI with Next.js and integrate Mapbox GL JS.
- Develop interactive map components and responsive design using Chakra UI.
- Implement geolocation detection and user-driven search.
- Backend Development (Weeks 5–6):
- Build RESTful API endpoints with Express.
- Integrate OpenWeatherMap, ipinfo.io, and Stripe.
- Implement caching and error handling.
- Integration & Testing (Week 7):
- Connect frontend with backend endpoints.
- Conduct testing for functionality, performance, and error handling.
- Deployment & Refinement (Week 8):
- Deploy the application using AWS (EC2, Nginx) and Vercel/AWS Amplify.
- Optimize performance and security.
- Finalize documentation and prepare for demonstration.