/oxio-coding-challenge

Primary LanguageJavaScript

My Next.js App

This is a sample Next.js application that uses Redux Toolkit, D3, and React Testing Library.

Project Structure

my-nextjs-app
├── pages
│   ├── _app.js
│   ├── index.js
│   └── api
│       └── hello.js
├── public
│   ├── favicon.ico
│   └── vercel.svg
├── src
│   ├── components
│   │   └── MyComponent.js
│   ├── features
│   │   └── counter
│   │       ├── counterSlice.js
│   │       └── CounterComponent.js
│   ├── hooks
│   │   └── useCustomHook.js
│   ├── store
│   │   └── store.js
│   └── utils
│       └── d3Example.js
├── styles
│   ├── Home.module.css
│   └── globals.css
├── tests
│   └── components
│       └── MyComponent.test.js
├── .eslintrc.json
├── jest.config.js
├── package.json
└── README.md

File Descriptions

  • pages/_app.js: Custom App component in Next.js. Initializes pages and provides global styles or state.

  • pages/index.js: Main page component in Next.js. Represents the home page of the application.

  • pages/api/hello.js: API route in Next.js. Handles the /api/hello endpoint and returns a JSON response.

  • public/favicon.ico: Favicon for the application.

  • public/vercel.svg: Vercel logo for the application.

  • src/components/MyComponent.js: React component called MyComponent.

  • src/features/counter/counterSlice.js: Redux Toolkit slice for managing the counter state.

  • src/features/counter/CounterComponent.js: React component called CounterComponent that uses the counter state from the Redux store.

  • src/hooks/useCustomHook.js: Custom React hook called useCustomHook.

  • src/store/store.js: Redux store configuration using Redux Toolkit.

  • src/utils/d3Example.js: Utility functions for working with D3.js.

  • styles/Home.module.css: CSS modules styles specific to the home page.

  • styles/globals.css: Global CSS styles applied to the entire application.

  • tests/components/MyComponent.test.js: Tests for the MyComponent component using React Testing Library.

  • .eslintrc.json: ESLint configuration file for linting the project.

  • jest.config.js: Jest configuration file for running tests.

  • package.json: Configuration file for npm. Lists the dependencies and scripts for the project.

  • README.md: Documentation for the project.