Posts

How to create Tinder Cards in ReactJs

-
Image
The app has created a sensation using its card and swipe functionality. Many of us try to create tinder cards and swipe effects and end up writing a lot of code. This problem is solved by ReactJs (one of the most popular library trending now).   In this article, we will work with the react package which allows us to create tinder cards with swipe functionality   Command to install package is:            npm install react-tinder-card   Let's start by creating a react app npx create-react-app tinder-cards cd tinder-cards npm install react-tinder-card npm start     Once the react app is up and running, we can create a data file to be rendered in tinder cards. data.js  Now create tinder cards in the app.js file If we break down the code:  First, we have to import a tinder card. Now we can create a TinderCard component that contains props to be passed className: Default prop which every component has. preventSwipe   : As Tinder Card provides swipe functionality in all four directi
Post a Comment
Read more

How to store images to server in base64 string format

-
Image
In Today's time, many web application revolves around images or images are the core part of the application and handling image upload and storing on the server and in the database has been a complex task from the beginning. In this article, we will have a look at the Reactjs component to convert image files to base64 string and storing that string on the server-side without maintaining a separate folder for storing uploaded images. Command to install the package:      npm install  react-file-base64   Advantages: It doesn't require setting  enctype ="multipart/form-data"  for uploading image files to the server. It does not require to set headers: {Content-Type:'application/JSON'} while making a post request to API and sending an image to API. On the server-side, it doesn't require to maintain a separate folder to store all image to it. It doesn't require setting the file path to the specified folder. It doesn't require setting the file name by
3 comments
Read more