Andyson

Building Whinst

Building a web app (Whinst) Part 26: Creating a UI and UX design plan

Now that all essential functionality in the Whinst web app has been added, I’ve started working on the UI(User Interface) and UX(User Experience). But before jumping into this I’ve created a design plan that highlights how everything will look once complete and how I will go about creating it. In this article, I’ll tell you …

Building a web app (Whinst) Part 26: Creating a UI and UX design plan Read More »

Building Whinst

Building a web app(whinst) part 25: Adding search functionality

Applications that have a lot of records usually have a search feature in them that allows users to search for a particular record instead of scrolling through many of them. In this article, I’ll walk you through how I setup search functionality in the Whinst web app. Search functionality­čöÄ To implement search functionality I first …

Building a web app(whinst) part 25: Adding search functionality Read More »

Building Whinst

Building a web app(whinst) part 24: Adding email and password editing functionality

An important feature in any application that has user accounts is the ability for users to change their emails and passwords. In this article, I’ll walk you through how I setup this essential functionality in the Whinst web app. Email editing­čôž To set up email editing functionality, I first setup a form using Formik where …

Building a web app(whinst) part 24: Adding email and password editing functionality Read More »

Building Whinst

Building a web app (Whinst) Part 23: Adding link and social media sharing functionality

An essential part of the Whinst web app is the ability for users to share catalogs they have created. Once a catalog is created a user can simply copy it’s link or share it directly to their social media apps. In this article, I talk about how I added functionality that allows users to share …

Building a web app (Whinst) Part 23: Adding link and social media sharing functionality Read More »

Building Whinst

Building a web app (Whinst) Part 22: Redoing page loading functionality with React suspense

Happy New Year!!!­čą│ In the last article, I told you about how I added page loading functionality using simple true and false loading states. When a page is opened and data is being fetched the loading state is set to true and the loading indicator appears on the screen. When the data has been fetched …

Building a web app (Whinst) Part 22: Redoing page loading functionality with React suspense Read More »

Building Whinst

Building a web app(Whinst) Part 21: Adding file editing and page loading functionality

In the last few articles, I told you about how I added functionality that allowed users to add files that included images and videos and how to create thumbnails for the uploaded videos. In this article, I’ll walk you through how I set up functionality that allows users to edit or change the files they …

Building a web app(Whinst) Part 21: Adding file editing and page loading functionality Read More »

Building Whinst

Building a web app (Whinst) part 20: Adding video thumbnail creation functionality

In the last article, I talked about how I set up functionality that allows videos to be uploaded and displayed in the Whinst web app. In this article, I’ll walk you through how I added functionality that allows users to select a video thumbnail from the frames of the video they uploaded. Creating video thumbnails­čľ╝ …

Building a web app (Whinst) part 20: Adding video thumbnail creation functionality Read More »

Building Whinst

Building a web app (Whinst) Part 19: Adding video playing functionality

In the last 2 articles, I walked you through how I set up file upload and image displaying functionality. In this article, I’ll talk about how I set functionality that allows uploaded videos to be played. Video playing functionality­čôŻ To set up video-playing functionality, a video player that plays the selected video file in the …

Building a web app (Whinst) Part 19: Adding video playing functionality Read More »