2021 FE-Survey

This site is developed by Next.js and React.js, integrated Chart.js for visualization and MongoDB as database.

Description:

This website provides visualization chart to show survey results about Taiwanese frontend engineer work. The survey results data is from third-party API. (hexschool/2021-ui-frontend-job)

Demo link:

https://2021-fe-survey-production.vercel.app/

Screenshots

Resource

• rawData API URL

Technologies

• Framework:
  • Next.js / React.js
• Frontend:
  • HTML / CSS / JavaScript
• Database:
  • MongoDB

Dependencies

• Material-UI
• Emotion
• Chart.js
• mongoose
• swr
• next-connect
• react-chartjs-2
• react-d3-cloud
• ... ( see package.json for details )

Dev Dependencies

• Husky
• Prettier
• ESlint
• commitlint
• babel
• ... ( see package.json for details )

Folder structure

    .
    ├── asset                        # media assets, like icons, etc..
    ├── components                   # global components
    │    ├── BarChart.js             
    │    └── ...             
    ├── configs                      # Configs setting for some dependencies
    ├── constants                    # Consistent values
    ├── models                       # Mongo model initial settings 
    ├── docs                         # Documentation files 
    ├── page                         # Next.js page folder with built-in route support
    │    ├── api
    │    │   ├── surveys             # Next.js API 
    │    │   │   └── ...  
    │    │   ├── hello.page.js       # Test db server connection status
    │    │   └── seed.page.js        # Insert data from external API to mongoDB
    │    ├── components              # Utility components under home page
    │    │   ├── AdviceSection.js                 
    │    │   └── ...                  
    │    ├── index.page.js           # Home page file
    │    ├── index.style.js          # Home page style file
    │    └── ...   
    ├── public                       # Static files, like images, etc..
    ├── styles                       # Global styles for material-UI theme
    ├── utils                        # Tools and utilities
    └──  ...

Setup

• Download or clone the repository

• Install dependencies

  yarn install

• Install MongoDB locally

• Run the development server:

  yarn dev

• Open http://localhost:3000/api/hello to check application is connected to mongoDB

• Open http://localhost:3000/api/seed to insert data into mongoDB

• Open http://localhost:3000 with your browser to see the homePage.

Author & Contributors

• Developer: Wei Lin
• Source Data: Provided by hexschool