https://github.com/kadobot/elements
https://github.com/kadobot/elements
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/kadobot/elements
- Owner: KadoBOT
- Created: 2016-12-23T22:36:04.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2016-12-31T19:18:21.000Z (over 8 years ago)
- Last Synced: 2024-04-13T21:22:43.474Z (about 1 year ago)
- Language: JavaScript
- Homepage: http://kadobot.github.io/Elements
- Size: 24.3 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Elements Frontend Challenge
---
This repo contains a code challenge I've made for [Elements](https://elements.nl). The challenge was to develope a onepage website, with some mandatory elements like:
- Navigation Menu
- A Parallax Effect
- One content block with a carousel containing at least 3 items
- One content block with the relevant companies we've worked with
- One content block with a blog post and option to comment
- One content block with a contact form
#### Requirements:
- HTML5
- Responsive (mobile + desktop is sufficient)
- High dpi (“Retina”) images
- Use at least 1 web font
- Should work in all major browsers
---
## Development
This code challenge was made using create-react-app and Redux. BEM pattern was used on the CSS, and the components structure follows the Atomic Design Pattern. Also, some funcional programming using Ramda was used.
The following npm packages were used in this project:
- [React.js](https://facebook.github.io/react/)
- [Ramda](http://ramdajs.com/)
- [Redux](http://redux.js.org/)
- [create-react-app](https://github.com/facebookincubator/create-react-app)
## Instructions
### Clone repo
Clone this repository to your machine by typying this on your console:
```
git clone https://github.com/KadoBOT/Elements
```
### Install
Inside the repository folder, install the necessary packages:
```
cd Elements
npm install
```
### Start development server
To run the dev server:
```
npm start
```
### Build production
Build the project for production:
```
npm run build
```
---
### Tests
#### Tests with Enzyme and Jest
For single test: `npm test`
Coverage test: `npm run test -- --coverage`
---
### Todo
- Improve Mobile View
- Test for Actions and Reducers.
- A Template page. To be able to visualize the site without the need to call the API.