Home

The project is built with node.js in the backend and react in the frontend.

Structure

Let's go through the structure:

• api
• app
• data
• images
• posts
• styles
• typings

API

The API is static and built when the node server (server.js) starts. It will find .yml-files in the data/-folder and generate .json files for the public to read.

More details (also possible to analyze from server.js):

The server goes through the data/-folder and finds files matching the groups; history, members and sponsors. Each of the groups has a year starting from 2016. It is possible to change the years to check in server.js. The server will now find history.2016.yml and parse it to /api/v1/history/2016 in JSON-format.

Sections given by the API

More sections may be provided for further development, but currently, these exists:

• history
• members
• sponsors

To add section you will need to add .yml-files with a section name. It does not need each year specified. The format is: /data/{section}.{year}.yml

Finishing up you will need to add a section to server.js where the others are specified (currently close to bottom).

Queries to the API

Finding data from each section for every year:

GET /api/v1/{section}

Finding spesific data from spesific year:

GET /api/v1/{section}/{year}

App

This is the application. All the files from this folder are bundled into dist/bundle.js with webpack with entry point in app/index.tsx. The entry point is the start of the app where all the routing is happening.

Routes:

The website uses app/components/App.tsx as root component. It contains the template with the Header, Footer and a place to inject the children specified in the app/index.tsx routes:

/* => App childrens => {
  / => FrontPage
  /about => AboutPage
  /blog => BlogPage
  /blog/tags(/:tags) => BlogPage
  /blog/:post => BlogPage
  /contact => ContactPage
  /cv(/:key) => CVPage
  /drones => DronePage
  /join => JoinPage
  /missions => MissionPage
  /team => TeamPage
  /team/:year => TeamPage
  /sponsors => SponsorPage
  /sponsors/:year => SponsorPage
}

• FrontPage is the default route when no path is specified.
• BlogPage will handle the URL from /blog/... and show all posts or a single post based on the URL.
• DronePage is the show page for the drones created in Ascend NTNU.
• TeamPage displays the teams and each role in the group.
• JoinPage has info on how to apply to the team.
• SponsorPage is a hidden page just showing the sponsor component.
• AboutPage shows a timeline and more info about the group.

Data

This folder contains all the data which gets generated by the API. The syntax is {section}.{year}.yml. Read more about this process at the (api)[#api] section.

Images

This folder contains assets and design elements to the page. We try to avoid adding images to the repo as the image folder will grow each year and Git does not make it easy to pull or push over 4GB of data if you do not change its limit and so on...

Folders in the images folder on the repo:

• drones contains one single image of each individual drone with a .stl-model of the drone.
• logo has all the used logos of Ascend NTNU on the site. Try to use SVG logos as they are smaller and more detailed.
• sponsors contains the logos of each sponsor we use on the site.
• teams has all the technical groups and admin group in SVG style.
• web has some images of graphical elements on the site. CSS will mostly be enough, men if not, use this folder.

Missing folders which needs to be provided outside Git (As the size of the folders will escalate):

• assets has all the content from blog articles and other sources needed on the site. Use this folder for videos and every extra content added to the site.
• teams/20*/ is the images of each individual member of the group.

How you provide the images is not important. Mostly you can find them on the server if you have access. Then you can run:

$ make download-images

Posts

This is all the posts on the site. Any post which gets added will be displayed on the site after starting the node server again - which happens on deployment.

Styles

This folder contains all the styles on the site. Currently, it is just a huge file with CSS. Navigate by search. The components are grouped in the file.

Typings

The project uses TypeScript which needs to specify types for the project. This folder mainly contains the typings for libraries used. Typings are very useful when the project grows and helps the IDE to validate the code. It might be hard to get used to it, but it is just Object oriented programming.