This is the front-end part of the wSurvey project, which is a simple project to demonstrate my full-stack software development skills, my knowledge of best practices and also is used to try out new things.
It's a simple survey app, similar to Google Forms, but is still a work in progress.
The front-end started with React 15.x and bootstrapped using create-react-app. The plan is to update the project to use React 16.x and use its new features such as Suspense and Hooks.
To talk to the server, which is a GraphQL API, the project is using the excellent Apollo Client library, using Apollo Components (available since version 2.1) turning the integration with the GraphQL API much easier. Apollo is also being used for state management, eliminating the need for Redux.
The project is using the Ant Design UI framework which, in my opinion, is one of the best ones. It looks awesome and has a bunch of high-quality components.
I'm also following some Responsive Design guidelines, especially making using of media queries, so the app can be used on laptops, tablets, and phones without problems.
The CSS preprocessor SASS (with SCSS syntax) was used to style the application. The SCSS files were organized following the 7-1 architecture pattern and some tips of the Sass Guidelines were adopted as well.
To better structure the CSS classes, some naming conventions were tested like BEM and OOCSS. However, after some experiments, the SUIT name convention was chosen because it plays well with React components. But maybe it's just a personal preference.
The project is using ESLint, one of the most popular JavaScript linters, together with the rules provided by the Airbnb JavaScript Style Guide, with just some few customizations.
The Stylelint linter, in conjunction with the SASS guidelines, is also used to format and verify the project's SCSS code.
This project is MIT licensed.