DEV Community: Al Rubel Rana

Medsy - React Medicine Ecommerce Template with Google sheet & Next JS

Al Rubel Rana — Sat, 12 Sep 2020 05:13:27 +0000

Medsy is a React Medicine Ecommerce Template with Google sheet, TypeScript & Next JS. Create your medicine store with our rich tech choice. Our super-fast E-commerce template is made to help anyone start their very own online store at ease, built with React, NextJS, Typescript & Tailwind CSS. Grow your business faster with our unified platform that is easy & quick to use. Use Google Sheet to run your business. Add your products to your google sheet -> show it in frontend -> get your orders in another google sheet. It is as simple as that.

Demo & Details

Medicine, being one of the key essentials of our lives – particularly during this pandemic, is a product that will always be in demand. While the current global crisis is wreaking havoc on traditional brick and mortar stores, E-commerce however, offers a unique opportunity for entrepreneurs to address this demand for medicine through a virtual marketplace and still generate sustainable revenue at a time when traditional businesses are struggling just to survive.

Why Medsy

Where to start though? E-commerce templates are a dime a dozen these days. There is no lack of niche templates, including medicine E-commerce themes either, each vocally touting its own features as the very best in the market. Within this loud noise, it can be difficult to identify the right choice for your pharmaceutical business. In the race to get more traction, most medicine E-commerce developers seem to forego a basic aspect of product development – functionality within simplicity. This is exactly where Medsy makes a difference.

Google Sheet Integration

Spit out jargon like coding language, back-end, admin dashboard, inventory overhaul and you are bound to daunt people. However, spreadsheets are common, every day tools that even students use. Medsy combines the simplicity of Google Sheets with the power and functionality of React and Next JS platforms to offer perhaps the easiest way to maintain and update your product repository as well as keep track of orders. Simply update your inventory list on Google Sheets and it will show up on the front-end. Again, once orders keep coming in, Medsy will auto populate another Google Sheet with the list of pending orders and make life easy for you. In this aspect, Medsy is indeed one of a kind and using it is really that simple!

Highly Customizable and Versatile

Medsy, built using the Tailwind CSS, is highly customizable. You can add upon the pre-built template and modify the design to your satisfaction without ever having to change the core HTML code. Whether you want to add/ remove features or implement your own ideas, it all can be done very easily.

Another aspect is that it is very versatile and is developed to be deployed on any hosting service. Whether GitHub, Vercel, Firebase or any other platform really, its makes no difference – just choose what is right for you and you’re all set!

Multiple Responsive Designs and Regular Updates

Medsy is designed to be fully responsive on all devices – be it PC, smartphones or tablets. On top of that, it has three layouts – Modern, Classic and Minimal – one of which is bound to cater to your needs. All these designs are efficient and intuitive to use, for both yourself and your customers. Further to this, as stated above, Tailwind CSS integration means you can customize further according to your needs.

Adding to this icing is the fact Medsy will have regular updates that will be adding new features and improving upon the original designs and inclusions. This, coupled with constant support from the developers mean that you’ve got all you need to start setting up your medicine shop online craft table.

Timing, as they say, is of the essence; particularly in this pandemic when we need to do all we can to stay afloat. So get an edge over your competition and check Medsy out now!

React Gatsby Next js Landing Page Collection

Al Rubel Rana — Wed, 22 Apr 2020 21:16:45 +0000

SuperProps — React Next Landing Page Templates

Demo & Details

_Welcome to React Next Landing Page, built with React, Next Js, Gatsby Js & Styled Components. NO jQuery!, We created reusable react components, and modern mono repo architecture, so you can build multiple apps with common components. You can use these landing for your react app. It’s super easy to deploy, we have provided complete firebase integration with it. You can host your next app into firebase along with other hosts like

Trending React Next Landing Page Collection

Next Landing Page, built with React, Next JS, Gatsby JS & Styled Components. NO jQuery!

Best Portfolio Landing Pages Template.

Portfolio

SuperProps — React Next Portfolio Landing Page Templates is clean. Creative and highly customizable React, Next JS, Gatsby JS & Styled Components. Template for Agency and Personal Portfolio websites. Responsive based on React JS. This is one page for placing your information. All files and code have been well organized and nicely commented for easy to customize.

SaaS Modern Responsive React Next Landing Page Templates

SaaS Modern

SaaS Modern is a responsive, professional, and multipurpose SaaS, Software, Startup landing template powered by React Next Landing Page, built with React, Next JS, Gatsby JS & Styled Components. NO jQuery!. SaaS Modern is a powerful and super flexible tool, which suits best for any kind of landing pages. SaaS Modern is definitely a great kick starter for your web project.

SaaS Modern design is harmonious, clean and user-friendly

Best SaaS Landing Page Template SaaS Classic

SaaS Classic

SaaS Classic is responsive Unbounce Landing Page Template for SaaS & Software sites. It is clean, modern and creative design suitable for all type of SaaS & Software style websites. This template is the perfect combination of creativity and professionalism with simplicity on all sections.

Ride Sharing Landing Page Template

Ride Sharing

SuperProps Ride Sharing is highly customizable and is built with keeping real projects in mind. You can create Ride sharing, Taxicab, Food Delivery, and Transportation network company React Next Template. The template is specially designed keeping the needs of users in mind.

SaaS Product Landing Page Templates

SaaS Product Landing Page

SuperProps SaaS Product landing page is a responsive React, Next JS, Gatsby JS & Styled Components saas template.

Looking for a landing page for your saas product app or startup? You are at the right place. SuperProps SaaS Product is a perfect template which is easy to develop with and it has unlimited customization possibilities. It is created with modern vibrant colors and shapes.

Best App Landing Page Template SuperProps

App Landing Page Template

SuperProps App Landing is a clean and modern App Landing Page Template. Built with React Next Landing Page, built with React, Next JS, Gatsby JS & Styled Components. It has different homepage styles and color variations. Well organized and comment codes so it’s very easy to customize and use in your project according to your needs.

SuperProps Agency Landing Page Template

Agency Landing Page Template

Modern and flexible One-page Multipurpose React Next template that you can use for Agency, business, portfolio or company profile. It is fully responsive template and suitable for all type of business, corporate, portfolio, digital agency or any creative modern looking websites.

Web Hosting Landing Page Templates from ThemeForest

Web Hosting Template

Best React Next Web Hosting Website Templates.

You are always prepared and fully equipped for building a powerful and professional hosting site with React Next Landing Page, built with React, Next JS, Gatsby JS & Styled Components. NO jQuery! web hosting website templates.

Our Best Landing Pages & Templates the list is updated weekly

Note: This post includes affiliate links; I may receive compensation if you purchase products or services from the different links provided in this article.

Start your next React App with Isomorphic

Al Rubel Rana — Thu, 09 Apr 2020 21:19:26 +0000

Modern web is all about javascript and its frameworks are growing faster. And if think about its frameworks, React Js has got most of the momentum. Working with react is pretty simple due to its awesome ecosystem, but it's very challenging to adapt the new modern web practices like Progressive web App(PWA) and asynchronous component loading with react. Moreover, the features like client side authentication (Firebase, Auth0) and Algolia Search integration are quite challenging to handle with.

By remembering all these issues, We have packed all these components and features and decided to make an admin Dashboard in react. We have named it Isomorphic. Demo is available in this link [https://redq.io/isomorphic]

When you are thinking about building a project to react, It is not only about to react. Some Major technologies like a build tool webpack and browserify, a state container like redux and mobx, Asynchronous Request handlers like redux-saga, Dynamic Routing handler like react-router are required to be configured perfectly regarding t0 your project’s specification.

Tools and Technologies We have Used

Create React App
React
Redux
Redux-Saga
React Router 4
Webpack 3
ImmutableJS

We have used create react app because of its universally accepted folder structure. We have used React-Redux and ImmutableJS to handle all our headache of storage container. As we are trying to build an admin dashboard, react-router is used for providing a Single Page Application(SPA). Moreover, We have used webpack 3 for its awesome features like code splitting and chunking.

In our Isomorphic, We have used service worker for offline user experience.

Design Components

Ant Design
React Chart 2
React Trend
Echart
React Vis
React Grid Layout
React Flip Move
React Google Charts

Ecommece Component

Algolia Search

Map Components

Google Map

We will provide Mapbox supports in our future updates.

Authentication Components

Authentication Firebase
Authentication Auth0

Best Practices We Have Followed

In React js project the same minor mistake we all make is load all the react components in the app boot time. This will cause unnecessary components to load neglecting the fact the loaded components is used on the present view or not. This makes the reactjs project slow and results in bad user experience. In this case, Async loading can be a savior. That is loading specific react components on demand. The following gif can describe it.

You can find this dashboard app in this following link Isomorphic.So, Don't waste your time, Grab and make it happen.

Note: This post includes affiliate links; I may receive compensation if you purchase products or services from the different links provided in this article.

Nevertheless, Al Rubel Rana Coded

Al Rubel Rana — Sat, 07 Mar 2020 06:35:58 +0000

Equality in tech looks like…

I’m an expert at…

My advice for allies to support self-identifying women and non-binary folks who code is...

Build A Blog With React Gatsby Using StoryHub

Al Rubel Rana — Thu, 05 Mar 2020 08:02:18 +0000

Nowadays, React Gatsby is implemented to make blog related template. And it is becoming a trend. So today, we will discuss a blog template entirely based on React Gatsby. We will try to make you understand the complete implementation of this blog template. So let us start the article.

StoryHub – React Gatsby Blog Template

StoryHub is a blog template powered by React & GatsbyJS. It’s an entirely functional static blog template. It’s swift, optimized for quick render. SEO friendly, complete markdown format supported. You will able to host it anywhere like GitHub, s3, now.sh, etc. It’s straightforward to use, and it provides better performance than WordPress. RedQ Inc. is the developer of this template who created reusable react components and modern monorepo architecture so that you can build multiple apps with standard components.

View Demo

Developed with React, Typescript a Gatsby JS.

Boot your server-side rendering landing page in minutes.

Gatsby blog starter.
All components are written in Typescript.
Monorepo Supported with Lerna Configuration.
Reusable components across different blog templates.
Styled System and Style Components are used.

Hosting & Deployment

Getting your shiny new Gatsby site deployed within minutes

Firebase
Netlify
AWS
Github
Zeit Now
Amazon S3

Template Features:

Js Gatsby, TS Typescript, Monorepo Support
Instagram Feed, SEO Friendly, MailChimp Integration,
Built-in Components, Disqus Integration, Fast performance

Step By Step Process to utilize the blog template

How to Configure / How to Install

This template has 5 different Blog demos. They are

After downloading the file from ThemeForest, You will find the StoryHub zip file. Then unzip StoryHub.zip file and run the following commands.

If you want to run Agency Blog on Gatsby Js server, then

yarn on Storyhub folder.
yarn agency-dev on Storyhub folder.

Then, please go to address localhost:8000 on your browser and You will find Agency blog. Similarly,

If you want to run Personal Blog on Gatsby Js server, then

yarn on Storyhub folder.
yarn personal-dev on Storyhub folder.

Then, please go to address localhost:8000 on your browser and You will find the personal blog.

If you want to run Personal Blog Minimal on Gatsby Js server, then

yarn on Storyhub folder.
yarn minimal-dev on Storyhub folder.

Then, please go to address localhost:8000 on your browser and You will find personal blog minimal demo.

If you want to run Image Blog on Gatsby Js server, then

yarn on Storyhub folder.
yarn image-dev on Storyhub folder.

Then, please go to address localhost:8000 on your browser and You will find Image blog.

If you want to run Minimal Photography blog on Gatsby Js server, then

yarn on Storyhub folder.
yarn photography-dev on Storyhub folder.

Then, please go to address localhost:8000 on your browser and You will find Minimal Photography blog.

If you want to run Personal blog lite-on Gatsby Js server, then

yarn on Storyhub folder.
yarn lite-dev on Storyhub folder.

Then, please go to address localhost:8000 on your browser and You will find Minimal Photography blog.

Stack Used By the developer

Lerna (A tool for managing JavaScript projects with multiple packages. https://lernajs.io)
Yarn Workspace.
React Js.
Typescript.
Gatsby Js.
GraphQl.
Styled System and Styled Components

*Original post: * Build A Blog With React Gatsby

Note: This post includes affiliate links; I may receive compensation if you purchase products or services from the different links provided in this article.

Build An Admin Dashboard Using React & GraphQL

Al Rubel Rana — Thu, 20 Feb 2020 10:25:44 +0000

Original post:React GraphQL Admin Dashboard Template

Inst is a Minimalist React Dashboard built with React, NextJS, TypeScript, GraphQL & Uber’s Base UI. It is very easy to use; GraphQL and TypeGraphQL are implemented. Inst is a Next.js GraphQL powered admin dashboard. Used progressive web application pattern, highly optimized for your next react application. You can use it for both Dashboard and Public pages for your web applications. Available in both Light and Dark mode.

To activate the Dark mode, Click on the profile image at the right corner, and you will find the ‘Dark Mode’ in Drop-down.

Note: Please note that, This is not an HTML template. It is a React Dashboard template built using Next.js Framework.

P.S. Design inspiration was taken from Now.sh

Inst – React GraphQL Admin Dashboard Template

View Demo

Built with

Next JS, React Apollo and GraphQL are used.
All components are written in TypeScript.
Monorepo Supported with Lerna Configuration.
SSR support for building highly scalable apps.
Uber's BaseUi
React Big Calendar

Stack Used by Developer

Lerna (A tool for managing JavaScript projects with multiple packages. https://lernajs.io)
Yarn Work-space
React Js and Next Js
TypeScript
GraphQL
TypeGraphQL
Baseweb design for UI components. https://v9-50-0.baseweb.design/
Now Deployment

Template Features

Create Next App, React Hooks, React Context
BaseUI Design, Next.Js, Next Optimized Image
Glide.Js for Slider, TypeScript, Apollo Client
GraphQL, TypeGraphQL, Styletron
Comes with both Dark & Light Mode
Charts, User Profile, ToDo
Github Search, Firebase CRUD, Product Hunt
Shop Page, Checkout Page, Invoice
Pricing Plan, Billing, Authorized Applications

Buy Theme

Getting Started

After downloading the file from Themeforest, You will find inst.zip file. Unzip the inst.zip and run the following commands on inst folder to get started with the project.

yarn

//For starting dev server run

yarn dev

NOTE: Before start the project add your config credentials in next.config.js file

env: {

      APOLLO_CLIENT_URL: 'http://localhost:4000/graphql',

      APOLLO_GITHUB_CLIENT_URL: 'https://api.github.com/graphql',

      APOLLO_PRODUCT_HUNT_CLIENT_URL:

        'https://api.producthunt.com/v2/api/graphql',

      GITHUB_AUTH_TOKEN: 'your_github_auth_token',

      PRODUCT_HUNT_AUTH_TOKEN: 'your_product_hunt_auth_token',

      FIREBASE_API_KEY: 'your_firebase_api_key',

      FIREBASE_AUTH_DOMAIN: 'your_firebase_auth_domain',

      FIREBASE_DATABASE_URL: 'your_firebase_database_url',

      FIREBASE_PROJECT_ID: 'your_firebase_project_id',

      FIREBASE_STORAGE_BUCKET: 'your_firebase_storage_bucket',

      FIREBASE_MESSAGING_SENDER_ID: 'your_firebase_messaging_sender_id',

      FIREBASE_APP_ID: 'your_firebase_app_id',

      FIREBASE_MEASUREMENT_ID: 'your_firebase_measurement_id',

    },

Folder Structure

/api

  /src

    /data

    /services

      /dashboard

      /integration

      /invoice

      /product

      /profile

/frontend

  /apollo

  /assets

  /components

  /containers

  /contexts

  /data [ui elements api data]

  /firebase

  /pages

  /types

  /utils

Routes

/

/apps

  /todo

  /firebase-crud

  /invoice

    /[id]

    /add

  /github

  /product-hunt

/shop

  /[slug]

  /checkout

/charts

  /area

  /column

  /bar

  /mixed

  /pie

  /radar

  /product-view

  /cash-flow

/forms

  /hook-form

/uielements

  /page-title

  /widget-card

  /carousel

  /cart-product

  /instagram-card

  /product-card

  /pricing-card

  /listgrid-card

/pricing

/profile

/settings

  /password

  /billing

  /applications

/login

/signup

/terms

/privacy

Explaining Containers

In the containers directory you will get folder for Calendar, Crud, Formik, HookForm[React hook form], Posts, Shop, Todo and Widgets.

All of these containers contain regular reactjs code.

Deployment

Developer has provided now.sh deployment support by default. Follow below instruction.

now.sh

Developer has given now.sh deployment by default. For hosting the project in now.sh.

Add your production credentials on next.config.js
first you have to go api folder and run now

$ cd api/
$ now
After deploying api you will get a url from now. You have to put that url in the

/frontend/next.config.js APOLLO_CLIENT_URL.
Now go to frontend folder and run now

$ cd frontend/
$ now

Note: Make sure you have now-cli installed in your system.

This post includes affiliate links; I may receive compensation if you purchase products or services from the different links provided in this article.

Building an eCommerce website with React GraphQL Template

Al Rubel Rana — Thu, 16 Jan 2020 12:20:59 +0000

Original post: Best React GraphQL ECommerce Template

There are lots of shopping templates available in several marketplaces. But choosing the right one is very difficult. Today we will talk about a shopping or eCommerce template named “PickBazar” developed by RedQ Inc. It is a new template published in the Envato marketplace.

Make Your Own eCommerce Website with React PickBazar Template

Fastest e-commerce template built with React, NextJS, TypeScript, GraphQL, Type-GraphQL & Styled-Components. It is effortless to use, and developers used GraphQL and type-GraphQL, you can build your schema very easily. GraphQL Playground makes its own documentation, and your front-end team will love using it. Creating an online store would be easier than ever.

If you implement this template, then you can increase your sales for sure. For smooth operation and handling a large volume of sell data and tracking orders “PickBazar” would be the most significant choice.

View Demo

Why Use React PickBazar Shopping Template?

Developed with Bleeding Edge Technology for the highly scalable project.

Shop Front

Next JS, React Apollo and GraphQL are used.
All components are written in TypeScript.
Monorepo Supported with Lerna Configuration.
SSR support for building highly scalable apps.

Shop Dashboard

Create React App (CRA), React Apollo and GraphQL are used.
Components are written in TypeScript and Base Web React UI Framework.
Easily create products in backend.
React Hooks Form for form handling.

Create your Next Ecommerce App with Pickbazar.

Create a beautiful commerce experience using the universal server-rendered Next.js framework. It’s very easy to use, RedQ Inc. used GraphQL and type-GraphQL.

Easy payment integration with Stripe!

Stripe is the best software platform for running an internet business. Stripe builds the most powerful and flexible tools for internet commerce. RedQ Inc. integrates Stripe with its PickBazar template.

React PickBazar Template Features

Bleeding Edge Technology

Next JS, React Apollo and GraphQL are used to build a super-fast e-commerce project.

React Apollo

React Apollo allows you to fetch data from your GraphQL server and use it in building complex and reactive UIs.

Fast Performance

Optimized for smaller build size, faster dev compilation and dozens of other improvements.

Built in Components

Components are written in TypeScript and Base Web React UI Framework. Components are easy to understand.

Ready for Deployment

The developer RedQ Inc. has made the deployment process clean and simple. You can deploy the template with Now.sh.

Elite Author Support

RedQ Inc. can assure you the proper Elite Author support and faster response for their products.

Getting Started & Installation

For getting started with the template you have to follow the below procedure. First, navigate to the PickBazar

directory. Then run below command for getting started with a speciﬁc part.

// on pickbazar directory yarn

Admin

For starting the admin dashboard part with corresponding API data run below commands.

// for dev mode run below command yarn dev:admin

// for production mode run below command yarn build:admin

Shop

Conﬁgure Stripe api key in the /packages/shop/next.config.js. In the env section set STRIPE_PUBLIC_KEY to your stripe public key.

For starting the shop part with the corresponding API run below commands.

// for dev mode run below command yarn dev:shop

// for production mode run below command yarn build:shop

If you want to test your production build admin or shop in local environment then run the below commands.

Admin

// build admin for production yarn build: admin

// run shop API which in needed for local testing yarn dev:API-admin

// start admin in production yarn serve:admin

Shop

// build shop for production yarn build:shop

// run shop API which in needed for local testing yarn dev:api-shop

// start shop in production yarn serve:shop

Folder Structure & Customization

/packages/admin: In this portion all the admin dashboard related coding and functions.

/packages/shop: All the shop related coding and functions.

/packages/api : API related code for both admin and shop section.

admin related API codes are in admin folder.

shop related codes are in the shop folder.

Conﬁguration & Deployment

now.sh

If you want to host the template in now.sh then follow the below command.

API

Navigate to packages/api
Now run below command

now

Admin

After deploying the api you will get the api endpoint url. Put that URL in the packages/admin/.env

REACT_APP_API_URL={put_your_api_url_here}/admin/graphql;

Navigate to packages/admin
Now run below command

now

Shop

After deploying the api you will get the api endpoint url. Put that url in the packages/shop/next.config.js

env: {

STRIPE_PUBLIC_KEY: ‘put_your_stripe_public_key’,

API_URL: ‘{put_your_api_url_here.}/shop/graphql’,

},

Navigate to packages/shop
Now run below command

now

Conclusion

Now we have come to the ending point of this article. We hope you have an idea about the PickBazar react GraphQL eCommerce shopping template. Without any hesitation, you can use this shopping template for your eCommerce store. Thank you very much for reading this article. If you really like this article glue guns, then please leave a comment on the comment section or give us a good rating. That is all for today. Have a beautiful day.

Purchase Now

Best React Redux Admin Dashboard

Al Rubel Rana — Wed, 25 Dec 2019 08:13:19 +0000

Original post: React Redux Admin Dashboard

ReactJs assists you to develop a responsive user interface very easily. It really does not matter how complicated the data structure is, you can generate interactive charts and UI elements smartly with the ReactJs. As you know that it is crafted and maintained by the Instagram and Facebook community, you actually do not need to be anxious about the quality or how skillfully it handles the complex codes. Therefore React is the unrivaled origin to originate an interface for web applications and the react dashboards have more innovative user interfaces.

Isomorphic – React Redux Admin Dashboard

Undoubtedly right now, this is the best React Admin Dashboard available in the marketplace. It is a first-class clean website dashboard with smooth design and simple colors. It is a react-redux powered single-page admin dashboard. Used progressive web application pattern, highly optimized for your next react application. You will have complete authority over the dashboard so easily. You can almost change each and every element of the template.

Template Features

Next.js implementation
Can create React App
Redux and Redux Saga
Social and JWT Authentication
Firestore CRUD
Firebase Chat View Demo

Mate – React Redux Material Admin Dashboard

This is the second-best React Redux Admin Dashboard available now in the marketplace. It is a react-redux powered single page material admin dashboard. Used progressive web application pattern, highly optimized for your next react application. Mate is an organized, advanced and clean React dashboard template for all your all kinds of business and project needs. It really does not matter the application you are about to make a reality, Mate is right here right now to do this for you. It is an awesome tool for generating a features-packed admin dashboard that will maintain all divisions of your business. You only require to download the tool, just pay a tiny amount of time and effort and you are just enough ready to go live. Truly, it is that unbelievably simple.

Template Features

Can create React App
Redux and Redux-Saga
Social and JWT Authentication
Firestore CRUD
Algolia Search
Invoice Builder

View Demo

ArchitectUI – ReactJS Bootstrap Admin UI Dashboard Theme

ArchitectUI is built for modern applications that are powered by any other technology that supports HTML/React integrations. It includes lots of components, elements, and widgets so that developers don’t waste time with the visual/design part. They just put some components together and voila, the app looks like it was built by a professional designer.

Template Features

9 different dashboard examples
Over 150 components that can be merged together to create new unique elements and flows
Layout options to easily make the sidebar, footer or header fixed or static
Two easy to customize light colors schemes with 8 different accent colors
Multiple page templates: fixed content title, fixed sidebar, split draggable layout
User pages for login, register, forgot the password, each with to variations: boxed and fluid

View Demo

EasyDev — React Redux BS4 Admin Template

EasyDev is an advanced dashboard template based on React Components and Bootstrap 4 Framework. It has used modern technologies and best practices that is why you can easily work with this product. It is the most convenient template for developers, because of React Components, clean code and detailed documentation, which allows you to build any projects easily. Use it for e-commerce, analytics, sports and other types of web or mobile applications.

Template Features

Bootstrap 4
Fully Responsive Layout
SASS Powered
100+ React Pages
Free Icon Fonts
200+ UI Elements View Demo

Clean UI — React Redux Admin Template

Clean UI is the simplest React Redux Admin Template. You do not need to start from scratch if you use this Admin Template. You can build a sleek, highly polished admin application with React+Redux, Bootstrap and Ant Design Framework that works great on mobile and tablet as well as desktop. It has an in-built page based template, route, authorization management features.

Template Features

7 in 1. Create-React-App, Create-React-App Seed, UmiJS, UmiJS Seed, Standalone Html, Basic Laravel Integration, Landing Page + Free Lite Versions
Create-React-App 2.x and UmiJS implementations
Bulletproof development stack
Easy for start coding
Ant Design – most complete & powerful React UI Framework
Responsive Layout, Light & Dark Themes, Multiple Layouts, Layout Settings

View Demo

Reactify – React Redux Material BootStrap 4 Admin Template

Reactify is a developer-friendly powerful reactjs template developed with redux, redux-thunk, webpack 4 and bootstrap 4. It is fully responsive and supports RTL languages with integrated language translation method. It provides ready to use components, widgets, and pages which makes it super easy to build a new admin panel as per requirement. It comes with pre-integrated API methods that provide you the power to build your dynamic listing pages with ease. Directly usable widgets give you the flexibility to show multiple details on your dashboard and other pages. Rectify is the template you will love to work on.

Template Features

Unique dashboard designs, 300+ UI elements, 20+ Custom page, Text editors, 1000+ Font icons
Responsive and data tables
Charts and graphs
Reactjs, Reactstrap, React Router Dom, React-Instant search, React Quill, React Draft Wysiwyg, React Dragula, React Big Calendar, React Bootstrap Sweetalert, React Custom Scrollbars, React d3 Speedometer, React notifications, ReCharts, React Content Loader
Material-UI
Redux, Redux Thunk, Redux Saga
Webpack 4.x
Axios
auth0-js, Moment.js
Slick Slider
Themify Icons, Material Icons
Google Maps, Leaflet Maps, Jvector Map
Screenfull
Star Ratings

View Demo

Portal – React Material Admin Template

Portal is a React Material Admin Template containing high quality. It has a lot of potentials. Portal provides six stunning layouts that will assist you to select the perfect look for you application admin. Material design gives it an outstanding look. There are ample of options you can pick up from with even more functionalities that foster the capacity to some truly maximum levels.

Template Features

Built with Facebook’s Create React App
Uses Latest Material UI Components
Super Stylish Dashboard
6 amazing layouts
RTL Supported
2 Example Apps
15+ Elements Pages
9 Fantastic Built in Themes
SASS stylesheets
Follows Airbnb React/JSX Style Guide
Lazy Loading Pages
Unlimited Theme Options
Uses Redux State Management
Chart.JS Widgets
Cross Browser Compatible
Beautifully Coded
Lifetime Updates
Famous 5 star solid support

View Demo

Jumbo React – Redux Material BootStrap Admin Template

Jumbo React is a complete React admin template based on Material Design Concept to help you build your react application faster and cost-effectively. Jumbo React uses the top-notch libraries and frameworks popular among the react developers community. Some of those popular libraries are Material-UI, Redux, Redux-Saga, ReCharts, React Big Calendar and many more. If you want a quick MVP, a solid product or a quick turn around on your react projects then Jumbo React covers these all for you. You can build any small to complex level application with Jumbo React.

Template Features

React 16.x, React Router DOM, React Hot Loader
Redux & Redux-Saga
Code Splitting
Async Loading
Google Material Design – Material UI
Multilingual supported with React Intl
Fully RTL Supported
6 Different Layouts and 3 Different Themes
Horizontal & Vertical Navigation
Firebase with APIs
Firebase authentication with social sites
Google Map
Calendar
500+ Material Design Icons
BootStrap4 (SCSS)
A perfect folder structure
Multi-level Routing and Dynamic Routing Support
ES6 with Babel
Package Management with Yarn
Modules Bundling with WebPack 3.x
Browsers Compatibility
Fully Responsive
No jQuery

View Demo

7 Tips to increase UI/UX design skills

Al Rubel Rana — Wed, 04 Dec 2019 16:25:11 +0000

Perfection is not an easy term to achieve within a certain period of time. Alike every field or sector, a successful career requires strong dedication, patience, and the ability to work harder & smarter than others.

However, taking on different challenges and continual improvements are a part of prosperity and that is applicable in all sectors.

So, if you ask a question in yourself how I increase UI/UX Design skills, then you should follow different suggestions which are given below by combining habitual activities and learning methods web design melbourne

Seven best way to improve UI/UX design skills:

If you are a web designer you should adopt the top seven advanced Tips, based on Habitual activities and learning Methods for the purpose of increasing UI/UX design skills PPP.

Read Daily or Study Different Lessons:

People always try to find a definite path to seeing the product directly. The main task of a designer is to make a comfortable zone through which they can understand what exactly they want to select Camping Merit Badge.

Now look,

Without scrutinizing attitude and circumstances designers can’t ensure great user experiences(UX).

In that case, for the purpose of increasing design skills, a designer should be comfortable with habitual activities and Reading skills are one kind of habitual activity branding chicago.

Learn from the Web:

Web courses are accessible to learn several things. A designer can get lots of informative tips that are free. elsewhere, paid courses are also available for designers.

However, free courses are effective but paid courses provide a prescheduled syllabus for learning Methods that more significant and with the help of these sources, a designer can avail complete guidelines for developing UI/UX design skills consequently.

If you know about your weakness, then it will be more fruitful to observe different video tutorials and vlogs for resolving your weakness. I guess it is also a good platform for all designers.

Practicing is the Pillar of Success:

In order to become a well-organized user interface (UI) designer, there is no shortcut to head working.

Practice regularly will increase efficiency. But most importantly it will increase your analytical skills. Besides, increasing the reading capacity about international affairs and awareness in the field of relevant research is useful.

In spite of preparing the aforementioned concept, a designer must gather information about color theory, typography, layout and alignment, human-computer interaction and grid theory and it is not possible with reading different books, articles, etc.

Color Correction Conceptsfor Website/Images:

Colors are the single most effective aspect. An ordinary design can flourish with the proper color combination. You should be selective while picking a color combination because only the correct color combination, leads to great UX.

To work on a UI design for a brand that requires a precise color concept of different layouts. At the primary color selection process, you have to select background color with a combination of light and dark. This color combination is appropriate for the primary layout color. In the next step, low contrast colors are preferable because it is convenient for sidebars, form fills, etc.

Moreover, when you are designing a User Interface, images play a vital role. At any point, images need to be matched with your design. If any image is dull or overexposed, it needs to be adjusted. Hence you can choose image color correction service from an online-based company like Clipping Way to get well appreciation from the client or execute the project successfully.

Communication Skill Improvement/ Improve Communication Skills:

Communication skills are the best part to be a good UI/UX designer Because without communication skills you can’t make a strong though that expresses the story.

Thus, a designer should have to build a story for a product and people will understand the value of the product by understanding this story.

But you should care about represent the story in a proper way. I think this will create a better opportunity for increasing skills. Consequently, the harmony of storytelling is another part of increasing design skills.

Looking for Several Sources:

When you fixed up your learning method with limited sources. You cannot move for advance learning and when you feel that thing, that time you should find several fields that are close to both UI and UX.

From those several fields, you have to preserve more knowledge for structuring information, content strategy and design of interaction. So it is a better option for a designer to step up another level.

Involve in Freelancing Based Project:

For a designer, the Freelancing field is a great source to increase skill level. It is an advanced level of a platform where designer a designer will get a lot s of advantages.

By using this field, you can communicate with the client and if you want to continue to build up communication, you should take different challenges. That variety of challenges forces you to do extra work which is really helpful for improving your skills.

This is not the end, besides maintaining those five tips. You should try to do more things like

Continuously explore more learning methods
Makeup one's own project
Find the feedback of your own work
Always practice from real based sources

Final Verdicts:

At the end of this discussion, to affix the UI/UX designer’s skills craftwizz observation, understandability is important. However, practice and desire are two main factors for being a skillful designer.

Thus, one thing should mention that greatness does not achieve easily. It comes from the balancing of smart works, skill, and simplicity.

How to create your portfolio website using React.js Template

Al Rubel Rana — Sat, 05 Oct 2019 11:39:54 +0000

Original post Portfolio Website Using React Template

In this present era entrepreneurs, freelancers, actors, musicians and people from different occupations want to showcase their work via an online presence. This is the best way to reach to the farthest corner of the world where at least internet access is available. To maintain online presence a personal website is a must. It helps to showcase a portfolio or a blog.

React is an awesome platform to build a template for blogging or portfolio purpose. React templates are the best way to advertise your works through the internet. A lot of react.js developers

busy to develop react templates on a continuous basis. They are publishing them on several marketplaces. It is really tough to find the best one from these huge number of already published templates. So we are here to make your job done.

That is why we are making a list of best portfolio personal website react template. Let us start the article. And another best react admin dashboard lists

SuperProps – React Next Landing Page Templates

View Demo

SuperProps is a versatile React based Template. It has multipurpose use. A lot of capabilities and functionalities make it the best in the business. One of its great functionality is Portfolio Landing. You can use this for showcasing your Portfolio. Complete firebase integration is included. Also, you can use these landing for your react app. It is also included with reusable react components and modern mono repo architecture.

Template Features

Versatile utilization
Create Next App
Monorepo Support
React Hooks used
Styled Component and Styled System
Elite Author Support
Fast Performance
Built in components
Online Documentation

StoryHub – React Gatsby Blog Template

View Demo

StoryHub is a blog template powered by React & Gatsby JS. It’s completely functional static blog template. It’s very fast, optimized for quick render. SEO friendly, complete markdown format supported. You will able to host it into anywhere like GitHub, s3, now.sh, etc. It’s very easy to use, it provides better performance than WordPress. This template is provided with reusable react components and modern mono repo architecture, so you can build multiple apps with common components

Template Features

All components are written in TypeScript
Monorepo Supported with Lerna Configuration
Reusable components across different blog templates
Styled System and Style Components are used
MailChimp integration
Engage your audience with DISQUS
Instagram Feed Integration
100% SEO Friendly
Fast Performance
Online Documentation
Customer Support
Video Documentation

React JS Resume – Web App Template

View Demo

This is a ReactJS based personal resume website template. Data is fed directly from a JSON File. This means that in its final form, it can be customized and used by anybody simply by filling in their own personal info into the JSON file and the changes will be dynamically fed into the site. If you would like to use this template for your own personal resume website, read on to learn how to build your own copy.

Template Features

Create-React-App
Fill in your personal info
Data access from JSON file directly
Easy to replace image and font

Conclusion

Now we are at the ending point of this article. We hope you really appreciate this informative article. If this article really assists you to gather knowledge about some best React based portfolio personal website react template then please share this article with your several Social Profiles and let others have the opportunity to read this article and gather knowledge. It would be a great honor for us. That is all for today. Please read our other articles on different interesting topics already posted on our blog. Keep in touch with our blog. Thank you very much for reading this article. So have a nice day

DEV Community: Al Rubel Rana

Medsy - React Medicine Ecommerce Template with Google sheet & Next JS

Why Medsy

Google Sheet Integration

Highly Customizable and Versatile

Multiple Responsive Designs and Regular Updates

React Gatsby Next js Landing Page Collection

SuperProps — React Next Landing Page Templates

Trending React Next Landing Page Collection

Best React Next Web Hosting Website Templates.

Start your next React App with Isomorphic

Nevertheless, Al Rubel Rana Coded

Equality in tech looks like…

I’m an expert at…

My advice for allies to support self-identifying women and non-binary folks who code is...

Build A Blog With React Gatsby Using StoryHub

StoryHub – React Gatsby Blog Template

Developed with React, Typescript a Gatsby JS.

Hosting & Deployment

Getting your shiny new Gatsby site deployed within minutes

Template Features:

Step By Step Process to utilize the blog template

*How to Configure / How to Install *

*If you want to run Agency Blog on Gatsby Js server, then*

*If you want to run Personal Blog on Gatsby Js server, then*

*If you want to run Personal Blog Minimal on Gatsby Js server, then*

*If you want to run Image Blog on Gatsby Js server, then*

*If you want to run Minimal Photography blog on Gatsby Js server, then*

*If you want to run Personal blog lite-on Gatsby Js server, then*

*Stack Used By the developer*

Build An Admin Dashboard Using React & GraphQL

Inst – React GraphQL Admin Dashboard Template

Built with

Stack Used by Developer

Template Features

Getting Started

Folder Structure

Routes

Explaining Containers

Deployment

Building an eCommerce website with React GraphQL Template

Make Your Own eCommerce Website with React PickBazar Template

Why Use React PickBazar Shopping Template?

Developed with Bleeding Edge Technology for the highly scalable project.

Create your Next Ecommerce App with Pickbazar.

Easy payment integration with Stripe!

React PickBazar Template Features

Bleeding Edge Technology

React Apollo

Fast Performance

Built in Components

Ready for Deployment

Elite Author Support

Getting Started & Installation

Admin

Shop

Admin

Shop

Folder Structure & Customization

Conﬁguration & Deployment

now.sh

Conclusion

Best React Redux Admin Dashboard

Isomorphic – React Redux Admin Dashboard

Template Features

Mate – React Redux Material Admin Dashboard

Template Features

ArchitectUI – ReactJS Bootstrap Admin UI Dashboard Theme

Template Features

EasyDev — React Redux BS4 Admin Template

Template Features

Clean UI — React Redux Admin Template

Template Features

Reactify – React Redux Material BootStrap 4 Admin Template

Template Features

Portal – React Material Admin Template

Template Features

Jumbo React – Redux Material BootStrap Admin Template

Template Features

7 Tips to increase UI/UX design skills

How to Configure / How to Install

If you want to run Agency Blog on Gatsby Js server, then

If you want to run Personal Blog on Gatsby Js server, then

If you want to run Personal Blog Minimal on Gatsby Js server, then

If you want to run Image Blog on Gatsby Js server, then

If you want to run Minimal Photography blog on Gatsby Js server, then

If you want to run Personal blog lite-on Gatsby Js server, then

Stack Used By the developer