Vitraux Visiteurs

Vitraux Visiteurs is a Web App built to guide people into discovering the beauty and history of stained-glass windows in Troyes, France.

Table of contents

• Setting up the development environment
• Run the application
• Webpack
• Development prerequisites
• Code structure
• App theme
• Versioning
• Creators
• Copyright and licence

Setting up the development environment

1. Install Node.js
2. Open command line
3. Go to project root folder
4. Run the following command to install project dependencies:

npm install

Run the application

1. In the project root folder, run this command

npm start

2. Open your browser, and go to localhost:8080.

Webpack

To build the app, we use Webpack. It's a module bundler for modern Javascript applications. We use it for many things :

• Transpile Javascript with Babel
• Compile Sass files.
• Create one .css file from all the .scss files.
• Minify .js files
• Minify .css files
• Build the React.js files into one big file.
• Run a dev server

All of this is done automaticaly when you run npm start to run the app.

For more details, see the webpack documentation

Development prerequisites

You must know

To understand the source code, you must learn these things :

• Javascript Because the app is coded in Javascript
• ES6 javascript syntax
• React.js A javascript library for building user interfaces

You must take a look at

You are going to use these tools. So you need to understand a bit how they work :

• React Router A router for React.js apps
• material-ui A set of React Components that implement Google's material design

You should take a look at

All the config is done. But if you want to know how it works :

• Webpack A module bundler for modern Javascript applications.
• Babel.js A Javascript transpiler

Hypertopic

Hypertopic documention
This is the protocol we use to fetch data bout stained glasses.

Look at /src/config/constants.js to see the API and endpoints we use and the ressource we fetch in Vitraux Visiteurs.S

Code structure

All the source code of the app is in the /src folder.

Main files

At the root of the /src folder, you can find 2 files.

index.html

This is the html page of the app. In this file, there is a div with the app id. This div is where we are going to mount our React app. All the scripts and css files are included automaticaly by webpack during the build.

index.js

In this file, we tell that we want to render the React app in the div with the app id of the html file.

• MuiThemeProvider is the required component to use material-ui (see the material-ui documentation for more about it).
• BrowserRouter is required to use react-router-dom
• App is the main component of our app.

The App component

It can be found at this path: /src/components/App.jsx. This is where we put all the content. You can see the AppBar and a Switch. This Switch component is part of react-router-dom. It will load a component depending of the current app route. These components are in the /src/components/pages folder.

Stores

It's a concept from the React Flux archirecture of Facebook. (you can find the official documentation of Flux here).

In our web app, we need the same data in different places (in different components). But we don't want to make a request to get the data each time we need them ! We want to make the requests once, the first time we need them.

Stores are the solution.
They are ES6 classes, that make a GET request to fetch the data when they are instanciated. As the app is a single page app, these instances are alive until we close the app. So the data are available until the app is closed.

On request response, the data are saved in the stores (as classe attributs), and we tell to the listening components that the store's data have changed by emmiting an event : this.emitChange() (look at /src/stores/BaseStore.js for more about it).

The components get their data from stores.

Services

The way we fetch data should be delegated. Components or stores don't fetch data from server or other, they delegate such tasks to services.

In our case, our services make GET requests to the hypertopic API. Our stores use services to retrieve their data.

App theme

Vitraux Visiteur uses material-ui to implement Google's material design. You can customise the Material ui theme by changing the colors in /src/config/theme.js.

Versioning

Vitraux Visiteurs is maintained under the Semantic Versioning guidelines.

Creators

This is a school project for the University of Technology of Troyes (UTT)

Professor:

• Aurélien Bénel

Student Team:

• Yassine Doghri
• Amine Benjelloun
• Denis Chenesseau
• Alexandre Patelli
• Maxime Couture
• Helene Ardo Sow
• Othman Tariq
• Nora Ouelasri
• Imane Tarchoun
• Damien Brandao

Copyright and licence

Code and documentation copyright 2016 Hypertopic.