Beautiful Portfolio Website with NextJS & ChakraUI

Wen Long — Tue, 04 Jan 2022 02:28:05 +0000

Website: https://teo-nextjs-portfolio.vercel.app/
Github: https://github.com/WenLonG12345/teo-nextjs-portfolio

After more than 2 months working in React Native, I was roughly understand how React works. Then, an idea came to my mind, why don’t I build myself a personal portfolio? It was a great thing to built to showcase all my skills and even good for presenting myself.
But mobile apps seems a bit burden as not everyone willing to download and install the apps into their phone just to understand your work right? People usually just want a click to reach their destination. Hence, website is my 1st choice!

Tech Stack

NextJS — popular React framework that offers many benefits without complex configuration.
ChakraUI — beautiful and simple UI components library
framer-motion — easy-to-use animation library for React
Spotify Now Playing integration
EmailJS — email service that send email directly with custom template. Vercel — platform used for deployment

Showcase (Dark Mode)

Here is some of the screenshot for the features.

Of course, with Chakra UI, it is very easy to setup both light & dark mode by using useColorModeValue(). (personally prefer dark mode).

Screenshot (Light Mode)

Mobile-responsive

Also, I tried hard to cater all the screens to be mobile-responsive. Here is some screenshots to show.

Conclusion

It is my 1st time working on web development. My experience was amazing with all these beautiful UI and animation. The challenges I faced was screen size responsive. I work on many different solutions and eventually obtain the best value for each components.
Do give me any feedback if I made any mistakes in this project. But overall, I think it is a good practices for me as a developer and programmer to keep myself passionate on develop something for either myself or the community.
Thanks for your time in reading this. and let’s meet in the next article! 🧀

React Native - Beautiful Horoscope App

Wen Long — Sun, 02 Jan 2022 11:04:16 +0000

Recently I was working on sample project that helps to sharpen my skill in React Native (RN), and I found an interesting API which related to horoscope. It was Aztro API, an open-source horoscope API. Hence, I decided to write myself a Horoscope App!

Screenshot of Horoscope App

Tech-stack

React Native (of-course!) and React Hooks
Redux & Redux-Saga
Axios

Because of my company projects are using Redux and Redux-Saga, and I am still very weak on the concept, hence I decided to make the app with Redux and Redux-Saga as the app’s state management.

Redux & Redux Saga

Redux is one of the most popular state management framework for React application and Redux Saga helps to manage the side effect asynchronously. You may learn more on Redux and Redux Saga. (I am still beginner on these! 😃). Their explanation are pretty clear but real-life experience is always better than reading book!

Back to API, It was a POST request with 2 params, sign and day .

POST: https://aztro.sameerkumar.website?sign= <sign> &day= <day>

<!-- RESPONSE --> 
{"current_date": "November 1, 2021", "compatibility": " Cancer", "lucky_time": " 7am",
 "lucky_number": " 64", "color": " Spring Green", "date_range": "Mar 21 - Apr 20",
 "mood": " Relaxed", "description": "It's finally time for you to think about just
  one thing: what makes you happy. "}

Here is the axios POST request implementation.

That’s it! Simple API call right? but how can we integrate it into Redux?

There are 3 important parts: Actions, Reducers & Store

Actions

As the API requested, there will 2 be request params sign & day and we created a type for it, API_REQUEST

2. Reducers

First, we defined our initial state where it contains loading , error & data . Then, we created a HoroscopeReducer that take current state, perform an action and return it with a new state. In the snippets, when we requesting from API, loading is set to true. If successfully get response, loading is set to false and data is set to response’s data. Meanwhile if error happens, error will be set to response’s error.

3. Store

Store is the place where hold the applicate state. Since horoscopeRequest is an async function, we can use Redux Saga to handle these operation.

We created a Saga watcher in generator function getHoroscope based on API_REQUEST actions and takeLatest will only take care of the latest sagas and automatically cancel any previous on-going sagas.

I had created a rootSaga in case there is any further sagas that can be merge into a single entry point for sagaMiddleware to run.

Finally, we create store with sagaMiddleware. Then run our rootSaga and render our application.

Render Application

After having store, we need a provider to bind our store to our application.

We are almost there! But how can we call our API in UI?

Since we only need to request API when selected a horoscope, we will request it in useEffect() (when it first launched the page & changing date). dispatch is used for request API.

Then, mapStateToProps is needed to map our state’s data into props, and connect mapStateToProps to our HoroscopeDetail .

Finally, we can get our state in HoroscopeDetail ‘s props — horoscopeModel !

UIUX design

There is 2 page in this application, which is Home & HoroscopeDetail .

In Home , I had created a FlatList to render horoscopeList (array of 12 zodiac) with customised HoroscopeCard .

HoroscopeCard Preview

In HoroscopeDetail , all the components are wrapped into SafeAreaView and ScrollView . Figure below shows the overall of the components used.

Result

iOS

Android

Conclusion

That’s all from me! Hope your guys enjoy reading my article and love what I had done. However, there is still some features to be enhance.

Shared element transition for zodiac icon.
Feature to share horoscope to your friends.
AppWidgets to show today’s horoscope.
And plenty more..

I had built a testing Android APK for you guys to download and try it out (check my Github link on bottom of the article)! Do drop me any feedback and please correct me if I have done anything wrong in this project. Happy React-Native-ing! 🍷

Github: https://github.com/WenLonG12345/RNHoroscope

DEV Community: Wen Long

Beautiful Portfolio Website with NextJS & ChakraUI

Tech Stack

Showcase (Dark Mode)

Screenshot (Light Mode)

Mobile-responsive

Conclusion

React Native - Beautiful Horoscope App

Screenshot of Horoscope App

Tech-stack

Redux & Redux Saga

Render Application

UIUX design

Result

Conclusion