We've been accustomed to websites having navigation bars at the top, the content in the middle, and footers at the bottom that contain links. This became the traditional and convenient way when designing websites in general. It provides the user the info he/she needs to find in a user friendly manner since we've been accustomed to scrolling from top to bottom when viewing a webpage. However, I was assigned to create a website that didn't follow that. A website that involves scrolling from left-to-right and top-to-bottom as screen transitions from the homepage was presented to me with the use of Adobe XD. That is what I had to do.
Personal Skill Assessment Before Starting The Project
During web projects in my university, I stayed away from using CSS for creating layouts because of my extensive use of Bootstrap. So I was totally useless when it comes to using CSS for designing a page without Bootstrap. So I didn't know how to use flex (which turned out to be handy as hell).
I had a feeling in my gut that I should use ReactJS for this project simply because the current screen being viewed could be stored in a state which I could just change with a simple this.setState();. Nevertheless, I had barely scratched the surface when it comes to using React since I tried some things out in React Native before so I know a thing or two about handling states. (P.S. It's been a while since I used JavaScript since I'm more used to REST frameworks that don't involve any JS code, so I also don't have a clue what ES6 had in store)
Knowing that ReactJS had a ginormous amount of packages that can be simply Googled and be quickly installed with a simple npm install insert-package-name-here thru the terminal, it really supported my gut feeling that ReactJS was the right library to use for this project (because that would make me progress in this project faster).
I decided to revisit Google's Firebase for storing data since I've used it before in a mobile application project that involved reading and writing Google Maps coordinates inside Firebase for our class in the university.
Basically that was my inner dialogue before I started the project. Since I was doing it by myself, I just had to assess myself about my strengths and weaknesses with relation to the project that I was about to do. :)
So in short, these are the tools that I decided to use:
- ReactJS (JSX, CSS, JavaScript ES6)
- Firebase (for the database and file storage)
Making The Design Come To Life
The first step I chose to do was the skeleton of the screen transitions. This is by starting to create the behavior of containers entering and exiting out of the view. Luckily, I came across the package React Transition Group.
reactjs
/
react-transition-group
An easy way to perform animations when a React component enters or leaves the DOM
react-transition-group 
ATTENTION! To address many issues that have come up over the years, the API in v2 and above is not backwards compatible with the original
React addon (v1-stable).For a drop-in replacement for
react-addons-transition-groupandreact-addons-css-transition-group, use the v1 release. Documentation and code for that release are available on thev1-stablebranch.We are no longer updating the v1 codebase, please upgrade to the latest version when possible
A set of components for managing component states (including mounting and unmounting) over time, specifically designed with animation in mind.
Documentation
TypeScript
TypeScript definitions are published via DefinitelyTyped and can be installed via the following command:
npm install @types/react-transition-group
Examples
Clone the repo first:
git@github.com:reactjs/react-transition-group.git
Then run npm install (or yarn), and finally npm run storybook to start a storybook instance that you can navigate to in your browser to see the…
This package simulated the lifecycle methods of components through various CSS class names instead of JavaScript functions. I won't go through an in-depth guide on this but I hope you get the gist that this is really useful in the screen transitions that I'm about to do.
With React Transition Group I managed to make the sliding animations for the page transitions. My next goal was to create the different layouts per page. Those pages are the homepage, services, team, portfolio, and contact us page. As a dev that didn't understand much about CSS before starting this project, I managed to land on what people use nowadays called the Flexbox in CSS (a.k.a. godsend layout tool). I used it while following a guide in CSS Tricks (A Complete Guide to Flexbox) which was so helpful in learning and using it.
Homepage
Services Page
Team Page
Portfolio
Portfolio with an artist chosen
Contact page overlay
The first page I did was the homepage. By working on the layout, I became familiar with CSS and especially with Flexbox. I began using z-indices to help me layer things such as the white dots in the background, the text in front, and the circles that go along with the navigation. I became comfortable in experimenting with flex-grow to put weights in the resizing of the interface when resized. Using the different attributes of align-items and justify-content to align contents of different containers to their respective alignments. However, I also realized that using React's states with CSS can enable you to create animations as long as the transition property in CSS is present.
For the circles, I had to create a trick that makes it responsive so that when you resize the window it doesn't get stuck in one place (this happened when I used the left, and right properties in CSS). There is a rectangle that is being resized that carries the circle on the edge of that rectangle. The GIF below demonstrates it with the rectangle having the red background. The rectangle also adjusts to the size of the window so the circle will definitely move with it as it resizes due to window resizing.
With the knowledge of Flexbox and more CSS than before, I breezed through the different pages except for the Portfolio. I spent more time in the Portfolio page because of the right side modal. The modal contains the different songs of an artist that can be played and a Spotify playlist/album embedded player for that artist. I also had to double check that the player works on several browsers since there was a case that it works on Chrome but it doesn't work on Firefox so I had to fix it when I encountered that issue. The Spotify embedded player was easy-as-pie to integrate since it just uses an iframe in HTML and it just requires you to pass an embedded link of the Spotify playlist or album that you want to display. Because of that the portfolio was the most tested feature I did in this website (but maybe because it had interaction in it).
Implementing the mobile version of the website was easy with the aid of React since I can just display a different component that goes well with mobile depending on the windows size and be on my way. I just set a listener that listens when the screen or window size becomes less or equal than 768 pixels. With that I set a boolean state to true or false whether it is mobile or not. I then proceeded to create mobile versions of each screen and it didn't take much time as I did in creating the desktop variant.
The last piece to finish the client side was the emailer. I searched high and low for a guide that can make this serverless since ReactJS is only a frontend library. I landed on Pantaley's guide (How to integrate Serverless contact form using Firebase Cloud functions in React) which was really easy to follow although it had a missing cherry on top which was informing the client side that the request was a success. I commented it on the blog post which was putting res.status(200).end() after all processes are done inside the Firebase function so that Axios can then execute the then() function of the promise. The guide also opened me to explore the capabilities of Firebase functions (Thanks Pantaley!). However during the deployment, we decided to move out using Gmail since it uses its proprietary domain for its email address so I had to create a new emailer using PHP in our company's server.
I also thought of creating a simple content management system (CMS) for the people owning Kindred. This would enable them to edit the content of the website easily. The CMS includes the various texts in the website, the list of team members, and uploading songs for different artists and setting which Spotify album/playlist those artists would display in the website. To store the songs, I used Firebase storage which was really easy to use due to Google's good documentation. The rest of the text and images uses the realtime database of Firebase. The images are stored in base64 string so that it doesn't consume much space in the storage.
Alas! I have reached deployment stage in a month (WOW!). I asked help from my colleagues in deploying this using Hostgator with its proprietary domain. I'm also amazed that it easily connects with Firebase hosting so I don't have to worry much in migrating. With that, the website is now alive in https://kindred.com.ph/. (website with dummy values)
My Post Project Recommendations
As a Computer Science student that researched on user interaction design or user experience, I wish I had time in inlining the design to become more usable to people.
The portfolio part of the website isn't that user friendly if you don't know how to interact with it since the artists don't look clickable.
The navigation could be somehow made easy if there is an easier way to navigate thru different screens without going back to the homepage.
There might be other interaction issues with the design that has been given to me. This could only be discovered through conducting usability testings.
React Redux could've also been a huge help in minimizing the passing of numerous properties that I had to.
My Post Project Assessment
After doing that website, I believe I've become more confident in using vanilla CSS without the use Bootstrap. I've also become more knowledgeable in JavaScript ES6 with the use of arrow functions, destructuring objects, and different array/object manipulators such as the map() function to process elements in an array in a quick fashion and the spread (...) operator to spread an object for it to be used for a component's properties or another object's properties. All in all, I learned a lot in using ReactJS and vanilla CSS while doing this project.
"Continue learning new things, it's a satisfying way to taste processes that would keep your brain busy in a good way."
Top comments (0)