Skip to content

ourjapanlife/findadoc-web

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

All Contributors

Find a Doc, Japan

Hello volunteers! Please check out CONTRIBUTING

Front-end Repository

🧭 Mission

Connecting people in Japan to the healthcare services they need, in the languages they need.

πŸ”­ Vision

We want to provide free, accessible, and quality healthcare information in multiple languages.

What is this repo?

This is the open-source, public repository for the findadoc.jp website! We welcome support and contributions :)

Have a look at the CONTRIBUTING and CODE_OF_CONDUCT to learn more about how to get started and where we could use your help.

Contributors

LaShawn Toyoda
LaShawn Toyoda

πŸ€” πŸ’» πŸ“£
Philip Ermish
Philip Ermish

πŸ€” πŸ‘€ πŸ’» πŸ§‘β€πŸ«
Ann Kilzer キルアー杏
Ann Kilzer キルアー杏

πŸ“– πŸ’» πŸ“†
Sulaymane Sillah
Sulaymane Sillah

πŸ’»
kei-design-jp
kei-design-jp

🎨
Nasira Nebi
Nasira Nebi

πŸ’»
Olivier Lechevalier
Olivier Lechevalier

πŸ’»
Derek Cameron
Derek Cameron

πŸ’»
Lily
Lily

πŸ’»
Lucy Gelderloos
Lucy Gelderloos

πŸ’»
bbqbum33
bbqbum33

πŸ’Ό πŸ” πŸ€” πŸ”¬ πŸ“’
Haruno10
Haruno10

πŸ€”
Aya-Yumino
Aya-Yumino

πŸ”¬ πŸ€”
William Brammer
William Brammer

πŸ’»
Anissa Chadouli
Anissa Chadouli

πŸ’»
Evan Peterson
Evan Peterson

πŸ’»
Gustavo Minoru
Gustavo Minoru

πŸ’»
Ntlja
Ntlja

🎨 πŸ’»
Chris Bowman
Chris Bowman

πŸ’»
Matt Keighley
Matt Keighley

πŸ’»

Tech used

Code Style

Getting started developing

Prerequisites

  • Yarn Berry (latest version)
  • Strongly recommended: IDE plugins for vue, eslint and editorconfig
    • These provide automatic linting error visibility instead of having to run yarn lint every time

Running the code locally

# install dependencies
$ yarn

# set up husky
$ yarn prepare

# For Development, start a dev server with hot reloading at localhost:3000
$ yarn dev

Running the moderation panel locally

Click to for instructions on running moderation panel locally - You need to clone and setup the backend following its [README](https://github.com/ourjapanlife/findadoc-server).

Then for the backend run:

# install dependencies
$ npm install

# start the local db
$ npm run dev:startlocaldb

# For Development, start a dev server backend
$ npm run dev

Once this is up and running you can start the frontend server with:

#Starting the local server connected to local database
yarn dev:localserver

To login you will want to go to /login and use the following username and password.

Now you can go to /moderation and see any changes to moderation components you may be working on with fake data.


Testing a production build

Click to for instructions on testing a production build

Generate the production bundle

$ yarn prod:build

Launch production server

$ yarn prod:start

# End to End Testing

We use [Cypress.io](https://www.cypress.io/) for E2E testing. While the server is running on port 3000, you can run the GUI with:

```sh
yarn run test:e2e

Or headless mode:

yarn test:e2e:run

If you'd like to run the server and tests in a single command, use:

yarn start:test

To learn how to write tests and use the GUI runner, visit the wiki


Folder Structure

assets/

The assets directory contains our uncompiled assets such as Stylus or Sass files, images, or fonts. Here's more information about the usage of this directory in the the documentation.

components/

The components directory contains our Vue.js components. Components make up the different parts of our page and can be reused and imported into the pages, layouts and even other components. Here's more information about the usage of this directory in the documentation.

layouts/

Used for building the common templates of the news articles. Here's more information about the usage of this directory in the documentation.

pages/

Contains all the pages of the site. Nuxt will read all the *.vue files inside this directory and setup Vue Router automatically. Here's more information about the usage of this directory in the documentation.

static/

This directory contains our static files. Each file inside this directory is mapped to /. Example: /static/robots.txt is mapped as /robots.txt. Here's more information about the usage of this directory in the documentation.

stores/

Contains Pinia store files for state management and data fetching.

Managing our Typescript types

Typescript types should ideally be located in the ./typedefs folder.

To easily sync object schemas used by our graphql api, we generate api schema types by running:

    yarn generate

This will automatically generate the gqlTypes.ts file with any schema updates from the server/api.

For any new typescript types, feel free to add them as well to the ./typedefs folder.

Troubleshooting

  • If you're getting errors building, you might need to run yarn again to update your dependencies.
  • If you're getting a different error, feel free to reach out in our #front-end slack channel or create a new github issue!