Currency Exchange Rates API

This project is a Next.js application that provides an API for fetching and displaying currency exchange rates. It uses Redux for state management and integrates with the @ducanh2912/next-pwa package for Progressive Web App (PWA) support.

Table of Contents

  1. Setup and Run
  2. Project Structure
  3. Next.js Project Structure and App Router
  4. @ducanh2912/next-pwa
  5. Redux
  6. Code Functionality
  7. File Descriptions

Setup and Run

Prerequisites

  • Node.js (v14 or later)
  • npm

Steps

  1. Clone the repository: 
    git clone <repository-url>
cd <repository-directory>
  2. Install dependencies: 
    npm install
  3. Set up environment variables: Create a .env file in the root directory and add the following variables: 
    NEXT_PUBLIC_API_URL=http://your-api-url
  4. Run the development server: 
    npm run dev
  5. Build the application: 
    npm run build
  6. Start the production server: 
    npm start

Project Structure

.
|-- README.md
|-- next-env.d.ts
|-- next.config.mjs
|-- package-lock.json
|-- package.json
|-- postcss.config.mjs
|-- public
|   |-- manifest.json
|   |-- robots.txt
|   |-- sw.js
|   |-- sw.js.map
|   |-- ui-screenshot.png
|   |-- workbox-7144475a.js
|   `-- workbox-7144475a.js.map
|-- src
|   |-- app
|   |   |-- components
|   |   |   `-- currency
|   |   |       |-- currencyLineChart.tsx
|   |   |       |-- currencyOptions.tsx
|   |   |       |-- currencySelector.tsx
|   |   |       `-- currencyTable.tsx
|   |   |-- favicon.ico
|   |   |-- globals.css
|   |   |-- layout.tsx
|   |   `-- page.tsx
|   |-- custom-sw.js
|   `-- redux
|       |-- currencySlice.ts
|       |-- providers.tsx
|       `-- store.ts
|-- tailwind.config.ts
`-- tsconfig.json

Project Structure

Root Directory

  • README.md: Contains the documentation for the project, explaining how to set up and run the code, and providing an overview of the project structure.

  • next-env.d.ts: TypeScript declaration file that ensures TypeScript understands the Next.js environment.

  • next.config.mjs: Configuration file for Next.js, allowing customization of the build process and other settings.

  • package-lock.json: Automatically generated file that describes the exact tree that was generated by npm, ensuring consistent installs across different environments.

  • package.json: Contains metadata about the project, including dependencies, scripts, and other configurations.

  • postcss.config.mjs: Configuration file for PostCSS, a tool for transforming CSS with JavaScript plugins.

Public Directory

  • manifest.json: Provides metadata for the web application, such as name, icons, and theme colors, used for Progressive Web Apps (PWA).

  • robots.txt: Instructions for web crawlers about which pages to crawl and index.

  • sw.js: Service worker file for caching and offline functionality.

  • sw.js.map: Source map for the service worker file, used for debugging.

  • ui-screenshot.png: Screenshot of the user interface, typically used for documentation or promotional purposes.

  • workbox-7144475a.js: Workbox library file for managing service workers and caching strategies.

  • workbox-7144475a.js.map: Source map for the Workbox library file, used for debugging.

src Directory

app Directory

  • components Directory
    • currency Directory
      • currencyLineChart.tsx: React component that renders a line chart using D3.js to display currency exchange rates.
      • currencyOptions.tsx: React component that provides options for selecting different currencies.
      • currencySelector.tsx: React component that allows users to select a currency from a dropdown menu.
      • currencyTable.tsx: React component that displays currency exchange rates in a table format.

  • favicon.ico: Icon file for the website, displayed in the browser tab.

  • globals.css: Global CSS file that defines styles for the entire application, including custom variables and utility classes.

  • layout.tsx: React component that defines the layout of the application, including headers, footers, and navigation.

  • page.tsx: Main page component for the application, typically the entry point for the user interface.

custom-sw.js

  • Custom service worker file for additional caching and offline functionality.

redux Directory

  • currencySlice.ts: Redux slice that defines the state and actions for managing currency data.
  • providers.tsx: React component that provides the Redux store to the application.
  • store.ts: Configuration file for the Redux store, combining reducers and middleware.

Configuration Files

  • tailwind.config.ts: Configuration file for Tailwind CSS, allowing customization of the utility classes and themes.

  • tsconfig.json: TypeScript configuration file that defines compiler options and project settings.

Next.js Project Structure and App Router

Next.js follows a file-based routing system. Each file named page.tsx within the /src/app directory and its subdirectories becomes a route in the application. For example:

  • /src/app/home/page.tsx will be accessible at /home.
  • /src/app/about/page.tsx will be accessible at /about.

Key Files:

  • layout.tsx: Defines the layout of the application, including headers, footers, and navigation.
  • page.tsx: Main page component for the application, typically the entry point for the user interface.

@ducanh2912/next-pwa

The @ducanh2912/next-pwa package is used to add PWA support to the Next.js application. It helps in generating a service worker and caching strategies to make the application work offline.

  • Configuration: next.config.mjs: The configuration file for Next.js, which includes settings for the @ducanh2912/next-pwa package.

Redux

Redux is used for state management in the application. It helps in managing the global state and making it accessible across different components.

Key Files:

  • store.ts: Configures the Redux store and combines reducers.
  • currencySlice.ts: Defines the state and actions for managing currency data.
  • providers.tsx: Provides the Redux store to the application.

Code Functionality

The application fetches currency exchange rates from an external API and displays them in a table and a line chart. Users can select different currencies and navigate through different pages of exchange rates.

File Descriptions

Root Directory

  • README.md: Contains the documentation for the project.
  • next-env.d.ts: TypeScript declaration file that ensures TypeScript understands the Next.js environment.
  • next.config.mjs: Configuration file for Next.js, allowing customization of the build process and other settings.
  • package-lock.json: Automatically generated file that describes the exact tree that was generated by npm, ensuring consistent installs across different environments.
  • package.json: Contains metadata about the project, including dependencies, scripts, and other configurations.
  • postcss.config.mjs: Configuration file for PostCSS, a tool for transforming CSS with JavaScript plugins.

Public Directory

  • manifest.json: Provides metadata for the web application, such as name, icons, and theme colors, used for Progressive Web Apps (PWA).
  • robots.txt: Instructions for web crawlers about which pages to crawl and index.
  • sw.js: Service worker file for caching and offline functionality.
  • sw.js.map: Source map for the service worker file, used for debugging.
  • ui-screenshot.png: Screenshot of the user interface, typically used for documentation or promotional purposes.
  • workbox-7144475a.js: Workbox library file for managing service workers and caching strategies.
  • workbox-7144475a.js.map: Source map for the Workbox library file, used for debugging.

src Directory

app Directory

  • components Directory
    • currency Directory
      • currencyLineChart.tsx: React component that renders a line chart using D3.js to display currency exchange rates.
      • currencyOptions.tsx: React component that provides options for selecting different currencies.
      • currencySelector.tsx: React component that allows users to select a currency from a dropdown menu.
      • currencyTable.tsx: React component that displays currency exchange rates in a table format.
  • favicon.ico: Icon file for the website, displayed in the browser tab.
  • globals.css: Global CSS file that defines styles for the entire application, including custom variables and utility classes.
  • layout.tsx: React component that defines the layout of the application, including headers, footers, and navigation.
  • page.tsx: Main page component for the application, typically the entry point for the user interface.

custom-sw.js

  • Custom service worker file for additional caching and offline functionality.

redux Directory

  • currencySlice.ts: Redux slice that defines the state and actions for managing currency data.
  • providers.tsx: React component that provides the Redux store to the application.
  • store.ts: Configuration file for the Redux store, combining reducers and middleware.

Configuration Files

  • tailwind.config.ts: Configuration file for Tailwind CSS, allowing customization of the utility classes and themes.
  • tsconfig.json: TypeScript configuration file that defines compiler options and project settings.