This repository contains a React application written principally by Thasanee Puttamadilok that will stand as the new frontend for the SlaveVoyages project starting in 2024.
It uses Vite and React, TypeScript, Redux-toolkit, and Material-UI.
The site is currently hosted in OCI.
Proposed changes to the repository are made on working branches off of develop. Accepted changes are integrated into main in order to be deployed.
To run this application locally, you'll need to have Node.js installed on your machine.
- use nvm (Node version management) tool make sure node -version is "correct "
- Check your local node version by
node -vand npm version withnpm -v - Make sure the versions are same as top of this README
- Check your local node version by
After cloning the repository, navigate to the project directory and install the dependencies.
As of Dec 1, 2023, these dependencies have to be installed in two steps
- Clear out any existing packages with
rm -rf package-lock.json node_modules - Install all but one of the packages with
npm i - Then install our one problematic dependency, the Mirador Viewer, with
npm i --force mirador@"^3.3.0" --no-save
You must ust the --no-save flag, or Mirador will be included in package.json, which will break the deployment.
Type of React-Route
npm i -D @types/react@18.0.21 @types/react-dom@18.0.6
To set up Redux Toolkit in your React project
import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './reducers'; // Import your root reducer
const store = configureStore({
reducer: rootReducer,
// Add any middleware or enhancers as needed
});
export default store;
Axios
npm install axios
Type Script
npm i -D typescript
To generate typeScript
npx tsc --init
dotenv
npm i --save-dev @types/node
3. Authorization
In the .env_sample, you need to set VITE_API_AUTHTOKEN and VITE_API_BASEURL and change file name to .env
Example:
VITE_API_AUTHTOKEN = 'Token ABCDEF.... (replace it with your authentication token)'
VITE_API_BASEURL = 'https://voyages.ilove.you.haha..... (replace it with your own url for api call)'
4. Run Application
npm run dev
5. Run Test Application
npm run test
The project is structured as follows:
│── public/
│── src/
│ ├── assets
│ ├── components
│ │ ├── Cascading
│ │ │ ├── CascadingMenu
│ │ │ ├── CascadingMenuMobile
│ │ │ ├── Dropdown
│ │ │ ├── MenuListDropdown
│ │ │ ├── MenuListDropdownPeople.tsx
│ │ │ ├── NestedMenuItem
│ │ │ ├── PaperDraggable
│ │ ├── FunctionComponents
│ │ │ ├── ColumnSelectorTable
│ │ │ │ ├── ButtonDropdownSelectoreColumn
│ │ │ │ ├── ColumnSelector
│ │ │ │ ├── DropdownColumn
│ │ │ │ ├── NestedMenuColumnItem
│ │ │ ├── AutocompletedTree
│ │ │ ├── CustomHeader
│ │ │ ├── TableCharacter
│ │ │ ├── TableRangeSlider
│ │ │── header
│ │ │ ├── drawerMenuBar
│ │ │ ├── HeaderNavar
│ │ │ ├── HeaderSearchLogo
│ │ │── Home
│ │ │ ├── stylesMenu
│ │ │ │ ├── StyledBurger
│ │ │ │ ├── SytledMenu
│ │ │ ├── BurgerMenu
│ │ │ ├── Menu
│ │ │ ├── MenuDropdownProps
│ │ │── PastPeople
│ │ │ ├── Enslaved
│ │ │ │ ├── ColumnSelectorEnslavedTable
| │ │ │ │ ├── ButtonDropdownSelectorEnslaved
│ │ │ │ ├── HeaderEnslaved
| │ │ │ │ ├── HeaderEnslavedNavBar
│ │ │ | ├── EnslavedPage
│ │ │ | ├── EnslavedPageScrolling
│ │ │ | ├── EnslavedTable
│ │ │ ├── Enslaved
│ │ │ │ ├── ColumnSelectorEnslaversTable
| │ │ │ │ ├── ButtonDropdownSelectorEnslavers
│ │ │ │ ├── HeaderEnslavers
| │ │ │ │ ├── HeaderEnslaversNavBar
│ │ │ | ├── EnslaversPage
│ │ │ | ├── EnslaversPageScrolling
│ │ │ | ├── EnslaversTable
│ │ │ ├── Header
│ │ │ │ ├── DrawerMenuPeopleBar
| │ │ │ ├── NavBarPeople
│ │ │ ├── PastPeoplePage
│ │ │── voyagePage
│ │ │ ├── Results
│ │ │ │ ├── RadioSelected
│ │ │ │ ├── AutocompletedBox
│ │ │ │ ├── BarGraph
│ │ │ │ ├── PieGraph
│ │ │ │ ├── RangeSlider
│ │ │ │ ├── Scatter
│ │ │ │ ├── SelectDropdown
│ │ │ │ ├── VoyagesHompPage
│ │ │ │ ├── VoyagesTable
│ │ │ ├── ScrollPage
│ │── fetchAPI
│ │ ├── pastEnslaved
│ │ │ ├── fetchEnslavedOptionsList
│ │ │ ├── fetchPastEnslavedApiService
│ │ │ ├── fetchPastEnslavedAutoCompleted
│ │ │ ├── fetchPastEnslavedRangeSliderData
│ │ │ ├── fetchVoyageSortedEnslavedTableData
│ │ ├── voyagesApi
│ │ │ ├── fetchApiService
│ │ │ ├── fetchAutoCompleted
│ │ │ ├── fetchOptionsData
│ │ │ ├── fetchOptionsFlat
│ │ │ ├── fetchRangeSliderData
│ │ │ ├── fetchVoyageGroupby
│ │ │ ├── fetchVoyageOptionsPagination
│ │ │ ├── fetchVoyagesOptionsApi
│ │ │ ├── fetchVoyageSortedData
│ │── pages
│ │ ├── Enslaved
│ │ ├── Enslavers
│ │ ├── Home
│ │ ├── PastPage
│ │ ├── VoyagesPage
│ │── redux
│ │ ├── getAutoCompleteSlice
│ │ ├── getColumnSlice
│ │ ├── getDataSetCollectionSlice
│ │ ├── getFilterPeopleObjectSlice
│ │ ├── getFilterSlice
│ │ ├── getOptionsDataPastPeopleEnslavedSlice
│ │ ├── getOptionsDataSlice
│ │ ├── getOptionsFlatObjSlice
│ │ ├── getPeopleEnlavedDataSetCollectionSlice
│ │ ├── getScrollEnlavedPageSlice
│ │ ├── getScrollPageSlice
│ │ ├── getTableSlice
│ │ ├── rangeSliderSlice
│ │ ├── store
│ │── share
│ │ ├── AUTH_BASEURL
│ │ ├── CONST_DATA
│ │ ├── InterfaceTypes
│ │ ├── InterfaceTypesTable
│ │ ├── InterfactTypesDatasetCollection
│ │ ├── PeopleCollectionType
│ │── style
│ │ ├── homepage.scss
│ │ ├── index.css
│ │ ├── Nav.scss
│ │ ├── page-past.scss
│ │ ├── page.scss
│ │ ├── Slider.scss
│ │ ├── table.scss
│ │── styleMUI
│ │ ├── index.ts
│ │ ├── thems.ts
│ │── tests
│ │ ├── components
│ │ ├── flat-files
│ │ │ ├── BARGRAPH_OPTIONS.test.ts
│ │ │ ├── PIECHART_OPTIONS.test.ts
│ │ │ ├── SCATTER_OPTIONS.test.ts
│ │ │ ├── Table_Cell_Structure.test.ts
│ │ │ ├── transatlantic_voyages_filter_menu.test.ts
│ │ ├── redux-test
│ │ │ ├── getDataSetCollection.test.ts
│ │ ├── untils-test
│ │ │ ├── valueGetter.test.ts
│ │── utils
│ │ ├── flatfiles
│ │ │ ├── enslaved_african_origins_filter_menu.json
│ │ │ ├── enslaved_african_origins_table.json
│ │ │ ├── enslaved_filter_menu.json
│ │ │ ├── enslaved_options.json
│ │ │ ├── enslaved_table_cell_structure.json
│ │ │ ├── people_page_data.json
│ │ │ ├── enslaved_texas_filter_menu.json
│ │ │ ├── enslaved_texas_table_cell_structure.json
│ │ │ ├── transatlantic_voyages_filter_menu_SIMPLE.json
│ │ │ ├── voyages_transatlantic_filter_menu.json
│ │ │ ├── varnamechecker.py
│ │ │ ├── voyages_bargraph_options.json
│ │ │ ├── voyages_collections.json
│ │ │ ├── voyages_piechart_options.json
│ │ │ ├── voyages_scatter_options.json
│ │ │ ├── voyages_transatlantic_table.json
│ │ ├── functions
│ │ │ ├── generateRowsData.ts
│ │ │ ├── getRowsPerPage.ts
│ │ │ ├── getColorStyle.ts
│ │ │ ├── hasValueGetter.ts
│ │ │ ├── TableCollectionsOptions.ts
│ │ │ ├── traverseData.ts
│ │── App.tsx
│ └── main.tsx
|── .env
|── eslintrc
|── .gitignore
|── .prettierrc
|── index.html
|── package.json
|── tsconfig.json
|── vite-env.d.ts
|── vite.config.js
This application is a simple search engine for the CRC Voyages database. It allows users to search for voyages based on various criteria such as the ship name, captain's name, or embarkation port. The search results are displayed in a table that can be sorted by various columns.
The application also includes a form for adding new voyages to the database, although this functionality is not yet fully implemented.
javascipt
npm run build
This will create an optimized build in the dist/ directory. The build artifacts can be deployed to a web server or hosting platform.
This documentation provided an overview and guide to the application built using Vite, React, TypeScript, Redux Toolkit, and Material UI. It covered the project structure, key features
This project is licensed under the MIT License.