Consumer Forms - description of the project and technology

12 March 2017

It’s time for another post in the series Get Noticed! (Polish: “Daj Się Poznać”). Finally translated texts into English, enjoy!

Project objective

Creating online forms for consumer - a web application running in a browser.

The assumptions

Running completely in the browser (frontend). No backend, completed forms will not be stored anywhere. Mainly due to requirements related to the processing of personal data. I don’t want to waste time writing TOS, privacy policy, report data set to the GIODO, etc.

Technology

I decided to use JS library React, because I want to train. This choice wasn’t caused by any other reason. Additionally I plan to use the Redux, which will help me in managing the state of the application. If the whole process of filling out the form is to be carried without the backend, I would like to have the current state of the application easily loaded, for example from localStorage or URI parameters.

Creating and running a project

For now, I’m writing in PhpStorm. I know this is a bad choice for JavaScript, but I don’t want to buy WebStorm. I think of using Atom but didn’t have enough time to mess around. This blog is also written in PhpStorm.

I created a project using the tool Create React App provided by Facebook. This project boilerplate is enough for me, it contains all I need: Webpack, Babel, ESLint. It doesn’t require any configuration and, most importantly, it works. If you need more advanced started project, eg. with hot reloading, router, or other functions, you can use this search engine for React started projects, to find your perfect starter.

When it comes to styling, I use a ready-made solution Material-UI. It’s a set of components for React, which implements assumptions of Material Design by Google. Consumer Forms is an utility app, so creating my own sophisticated graphic design is unnecessary. Material Design is known to users, at least because of the popularity of Android in Poland, which is why using the application should be fairly intuitive. To be honest this is not a very complicated project.

Creating a skeleton of the application is “relatively simple”. According to the documentation it is enough to run:

npm install -g create-react-app

create-react-app my-app
cd my-app/
npm start

The application works and is available at http://localhost:3000/. You can now start writing. Since the beginning it has live reload, so all changes are immediately visible in the browser, you do not need to configure anything.

At the beginning I installed react-router and aforementioned material-ui (and react-tap-event-plugin). I included in the file index.html a chunk of code responsible for loading Roboto fotn:

var WebFontConfig = {
  google: { families: [ 'Roboto:400,300,500:latin' ] }
};
(function() {
  var wf = document.createElement('script');
  wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
  wf.type = 'text/javascript';
  wf.async = 'true';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(wf, s);
})();

Application structure and routing

Below I present the initial application structure, divided into pages.

• o co tu chodzi (strona startowa) - En: about
• formularze i wnioski - En: forms and applications
  • formularz 1 - En: form 1
  • formularz 2 - En: form 2
  • …
  • formularz n - En: form n
• pozwy, skargi i inne - En: Lawsuits, complaints and other
  • formularz 1 - En: form 1
  • formularz 2 - En: form 2
  • …
  • formularz n - En: form n

Mapping the structure using a router:

<Router history={browserHistory}>
    <Route path="/" component={App}>
        <IndexRoute component={Home}/>
        <Route path="/forms" component={Forms}>
            <Route path="/forms/:formName" component={Form}/>
        </Route>
        <Route path="/lawsuits" component={Lawsuits}>
            <Route path="/lawsuits/:lawsuitName" component={Lawsuit}/>
        </Route>
    </Route>
</Router>

Link to the project repository https://github.com/mkutyba/FormularzeKonsumenckie

Comments

Read more!