This responsive HTML page was built with React.js, Bootstrap and icons from Material-ui.
Clone the project onto your computer and install required packages with
git clone https://github.com/jkerola/lianaCodeTest.git
cd lianacodetest
npm installthen start the development server with
npm startHIGHLY RECOMMENDED to open a separate terminal window and start the development database with
npm run db as without this email subscription and RSS feed fetching will fail.
The HTML should now be viewable at http://localhost:3000.
Email addresses submitted via the page can be viewed at http://localhost:3001/subscribers.
Project modeled after image here.
The page is not a 1:1 recreation, but as close as I could get. Images and logos were extracted from the template with Krita and cropped with MSPaint. Icons are imported from @materials-ui/icons package, with CSS styling to match.
Responsiveness was achieved by using components provided by React-Bootstrap. Functionality was manually tested on multiple machines as well as emulation due to the scope of the project.
Development database and server uses JSON-server.
Parallax effect was achieved with react-scroll-parallax.
Animated numbers were created with react-countup to achieve crossplatform support, as custom CSS animations did not work on my personal phone.
RSS feed parsing was done with rss-parser. Due to CORS preventing direct access to LianaTech.com/blog.rss a local copy the feed is hosted with JSON-server.