日本語版 README はこちら

Population of Japan by prefecture

Discover Japan's Population Trend with Vue3 + Vite!

Choose your favorite prefecture and explore Japan's latest population trend in this project. Learn more about the country's changing demographics!

Live site: https://population-of-japan.vercel.app/

Tech Stack

• VueJS (Vue3)
• Vite
• Pinia for state management
• RESAS API for getting population data in Japan
• Highcharts for interactive graph
• TypeScript and Vue tsc for static analysis
• ESLint for syntax checking and code styling

Getting Started

Follow these steps to set up and run the project locally.

Prerequisites

• Node.js (https://nodejs.org) should be installed on your machine.

Recommended IDE Setup

• VS Code + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Installation

1. Clone the repository to your local machine.

git clone https://github.com/mayl730/population-of-japan

2. Install the dependencies using npm.

npm install

3. Sign up and get your API key at here: RESAS API

4. Setup your environment file and name it as .env. env file template

Put your own API key at the environment file:

VITE_API_KEY=XXXXXXXXXXXXXXXXXXXXXX

5. Running the Development Server

npm run dev

Additional Commands

npm run build : Build the production-ready code in the dist folder.

Future Update

• Display error messages on the website during failure states.
• Conduct tests using Cypress.