IFU Official Website

This is the source code for the official website of Internation Family Union (IFU), a registered Non-Governmental Organization (NGO) in the United States

Visit IFU Official Website

Framework

Nuxt.js, an open-source web application framework that supports server-side rendering based on Vue.js, Node.js, Webpack and Babel.js

Project Structure

assets: all images files organized in the corresponding folder
components：all Vue components
lang: language files
layouts：default.vue - Template file for all pages
pages：webpage files，each of which automatically configures a route for the corresponding filename
- Example：index.vue will be shown in https://ifuglobal.org/, and about.vue will be shown in https://ifuglobal.org/about/
plugins: Loaded JS plug-in. Currently, we only have one chat box plug-in in this folder
static：Static files other than image files. Currently, we only have site icons in this folder
tabs：subpages - Use with components/Tab.vue to switch pages based on different tabs selected

Page Structure

Pages shown in the UI design

/home
/about
- story
- culture
- progress
- team
service
- /totoro
  - totoroad bridging courses
  - totoroad synchronous tutoring
- /membership
  - membership
  - ISIC X ISIC membership
- /more
/contact
- emergency contact
- other contact information
/support

Available Scripts:

In the project directory, you can run:

`npm install`

to install all npm packages.

After installing all packages, you can run:

`npm run dev`

to run the application in the development mode. You can view the local site by visiting localhost:3000. This allows the webpages to live reload once you save the changes in the code.

Development Tools and Plugins Used

We recommend Visual Studio Code as a default code editor for development

Vetur: Vue tooling for VS Code
ESLint: Find and fix problems in JavaScript code
Prettier: Opinionated code formatter - Open ifu-2.code-workspace file in the project root directory. The project will automatically enable Format on Save functionality to format all code in the project when saving changes
i18n Ally: All in one i18n extension for VS Code to view the translation

Npm Packages Used

Style - SCSS: preprocessor scripting language
Translation - Nuxt-i18n

Development Note:

Please use the dev branch to develop the application

Submit a pull request from the dev branch to the master branch and request Haoyang Chen as a reviewer once you finish working on all tasks assigned to you.

Deployment

We used Vercel, a platform that deploys project automatically on every PR with the Github integration, to deploy the website
- all commits pushed to dev branch will update https://test.ifu-china.com/
- all commits pushed to master branch will update https://ifuglobal.org/
- Because we specified to use dev branch for development，you should submit a pull request Pull Request from dev branch to master branch

HaoyangChen/ifu-2