364: Varun Vachhar

I got to talk to Varun! Varun is an incredible artist and would have been interesting to talk with him about literally anything, but since he’s dipped numerous toes into the world of NFTs, I wanted to chat with him about that in conjunction with his own art and other artists he’s a fan of.

Time Jumps

00:50 Sharing and teaching in creative ways

02:39 Guest introduction

03:49 What’s Chromatic?

04:35 Infinite pipes

07:52 NFT’s using randomness

11:02 CodePen users and NFT

13:08 When code gets copied for an NFT

15:27 Sponsor: Linode

16:14 Zhi

19:06 Royalties on NFTs and trading

22:29 How much money can you make selling NFTs?

23:49 Metaballs (Pen)

26:21 Walkers

28:24 How do I buy an NFT of a Pen?

31:05 Morphing gradients

33:29 Responding to NFT controversy

Sponsor: Linode

Visit linode.com/codepen and see why over a million developers trust Linode for the infrastructure.  From their award-winning support (offered 24/7/365 to every level of user) to ease of use and set up; it’s clear why developers have been trusting Linode for projects both big and small since 2003.   Linode offers the industry’s best price-to-performance value for all compute instances, including shared, dedicated, high memory, and GPUs. Linode makes cloud computing simple, affordable, and accessible allowing you to focus on your customers, not your infrastructure.  Visit linode.com/codepen, create a free account and you’ll get $100 in credit.

The post 364: Varun Vachhar appeared first on CodePen Blog.

Stand With Ukraine!

The war in Ukraine is a ghastly tragedy and an outrageous event which can never be justified. The war has catastrophic effect on the lives of millions of people not only in Ukraine , but around the whole world. The team of Flatlogic strongly condemns all acts of violence wherever they appear.

Our headquarters are located in Lithuania, we are originally from Belarus, but we also have lots of our employees in Ukraine. That’s why we were directly affected by these appalling events. We understand the pain and devastating losses of Ukrainians and try to help in a way we can by sharing a free year of access to Flatlogic platform for all developers (software engineers, IT companies) from Ukraine. Please contact us to get free access to Flatlogic platform.

We are committed to supporting the people of Ukraine and continue to work in conjunction with our software engineers, customers and partners as a global community to help Ukraine and the people of Ukraine everywhere.  

The post Stand With Ukraine! appeared first on Flatlogic Blog.

Caching NextJS Apps with Serverless Redis using Upstash

The modern application we build today is sophisticated. Every time a user loads a webpage, their browser needs to download the bulk of data in order to display that page. A website may consist of millions of data and serve hundreds of API calls. For the data to move smoothly with zero delays between server and client we can follow many strategies. We, developers want our app to deliver the best user experience possible, to achieve this we can employ a variety of techniques available.

There are a number of ways we can address this situation. It would be the best optimization if we could apply techniques that can reduce the amount of latency to perform read/write operations on the database. One of the most popular ways to optimize our API calls is by implementing Caching mechanism.

What is Caching?

Caching is the process of storing copies of files in a cache, or temporary storage location so that they can be accessed more quickly. Technically, a cache is any temporary storage location for copies of files or data, but the term is often used in reference to Internet technologies.

By Cloudflare.com

The most common example of caching we can see is the browser cache, which stores frequently accessed website resources locally so that it does not have to retrieve them over the network each time they are needed. Caching can boost the performance bottleneck of our web applications. When mostly dealing with heavy network traffic and large API calls optimization this technique can be one of the best options for our performance optimization.

Redis: Caching in Server-side

When we talk about caching in servers, one of the top pioneers of caching built-in databases is Redis. Redis (for REmote DIctionary Server) is an open-source NoSQL in-memory key-value data store. One of the best things about Redis is that we can persist data in a database that can continuously store them unless we delete or flush it manually. It is an in-memory database, its data access operations are faster than any other disk-based database, which eventually makes Redis the best choice for caching.

Redis can also be used as a primary database if needed. With the help of Redis, we can call to access and reaccessed as many times as needed without running the database query again. Depending on the Redis cache setup, this can stay in memory for a few hours, a few minutes, or longer. We even can set an expiration time for our caching which we will implement in our demo application.

Redis is able to handle huge amounts of data in real-time, making use of its in-memory data storage capabilities to help support highly responsive database constructs. Caching with Redis allows for fewer database accesses, which helps to reduce the amount of traffic and instances required even achieving a sub-millisecond of latency.

We will implement Redis in our Next application and see the performance gain we can achieve.

Let’s dive into it.

Initializing our Project

Before we begin I assume you have Node installed on your machine so that you can follow along with the steps involved. We will use Next for our project because it helps us write front-end and back-end logic with no configuration needed. We will create a starter project with the following command:

$ npx [email protected]typescript

After the command, give the project the desired name. After everything is done and the project is made for us we can add the dependencies we need to work on in this demo application.

$ npm i ioredis @chakra-ui/core @emotion/core @emotion/styled emotion-theming
$ npm i –save-dev @types/node @types/ioredis

The command above is all the dependencies we will deal with in this project. We will be making the use of ioredis to communicate with our Redis database and style things up with ChakraUI.

As we are using typescript for our project. We will also need to install the typescript version of the node and ioredis which we did in the second command as our local dev dependencies.

Setting up Redis with Upstash

We definitely need to connect our application with Redis. You can use Redis locally and connect to it from your application or use a Redis cloud instance. For this project demo, we will be using Upstash Redis.

Upstash is a serverless database for Redis, with servers/instances, you pay per hour or a fixed price. With Serverless, you pay per request. This means we are not charged when the database is not in use. Upstash configures and manages the database for you.

Head on to Upstash official website and start with an easy free plan. For our demo purpose, we don’t need to pay. Visit the Upstash console after creating your new account and create a new Redis serverless database with Upstash.

You can find the example of the connection string used ioredis in the Upstash dashboard. Copy the blue overlay URL. We will use this connection string to connect to the serverless Redis instance provided in with free tire by Upstash.

import Redis from “ioredis”;
export const redisConnect = new Redis(process.env.REDIS_URL);

In the snippet above we connected our app with the database. We can now use our Redis server instance provided by Upstash inside or our App.

Populating static data

The application we are building might not be an exact use case but, we actually want to see the implementation of caching performance Redis can make to our Application and know how it’s done.

Here we are making a Pokemon application where users can select a list of Pokemon and choose to see the details of Pokemon. We will implement caching to the visited Pokemon. In other words, if users visit the same Pokemon twice they will receive the cached result.

Let’s populate some data inside of our Pokemon options.

export const getStaticProps: GetStaticProps = async () => {
const res = await fetch(
‘https://pokeapi.co/api/v2/pokemon?limit=200&offset=200’
);
const { results }: GetPokemonResults = await res.json();

return {
props: {
pokemons: results,
},
};
};

We are making a call to our endpoint to fetch all the names of Pokemon. The GetStaticProps help us to fetch data at build time. The getStaticProps()function gives props needed for the component Home to render the pages that are generated at build time, not at runtime, and are static.

const Home: NextPage<{ pokemons: Pokemons[] }> = ({ pokemons }) => {
const [selectedPokemon, setSelectedPokemon] = useState<string>(”);
const toast = useToast();
const router = useRouter();

const handelSelect = (e: any) => {
setSelectedPokemon(e.target.value);
};

const searchPokemon = () => {
if (selectedPokemon === ”)
return toast({
title: ‘No pokemon selected’,
description: ‘You need to select a pokemon to search.’,
status: ‘error’,
duration: 3000,
isClosable: true,
});
router.push(`/details/${selectedPokemon}`);
};

return (
<div className={styles.container}>
<main className={styles.main}>
<Box my=”10″>
<FormControl>
<Select
id=”country”
placeholder={
selectedPokemon ? selectedPokemon : ‘Select a pokemon’
}
onChange={handelSelect}
>
{pokemons.map((pokemon, index) => {
return <option key={index}>{pokemon.name}</option>;
})}
</Select>
<Button
colorScheme=”teal”
size=”md”
ml=”3″
onClick={searchPokemon}
>
Search
</Button>
</FormControl>
</Box>
</main>
</div>
);
};

We have successfully populated some static data inside our dropdown to select some Pokemon. Let’s implement a page redirect to a dynamic route when we select a Pokemon name and click the search button.

Adding dynamic page

Creating a dynamic page inside of Next is simple as it has a folder structure provided, which we can leverage to add our dynamic Routes. Let’s create a detailed page for our Pokemon.

const PokemonDetail: NextPage<{ info: PokemonDetailResults }> = ({ info }) => {
return (
<div>
// map our data here
</div>
);
};

export const getServerSideProps: GetServerSideProps = async (context) => {
const { id } = context.query;
const name = id as string;
const data = await fetch(`https://pokeapi.co/api/v2/pokemon/${name}`);
const response: PokemonDetailResults = await data.json();

return {
props: {
info: response,
},
};
};

We made the use of getServerSideProps we are making the use of Server-Side-Rendering provided by Next which will help us to pre-render the page on each request using the data returned by getServerSideProps. This comes in handy when we want to fetch data that changes often and have the page updated to show the most current data. After receiving data we are mapping it over to display it on the screen.

Until now we really have not implemented caching mechanism into our project. Each time the user visits the page we are hitting the API endpoint and sending them back the data they requested for. Let’s move ahead and implement caching into our application.

Caching data

To implement caching in the first place we want to read our Redis database. As discussed Redis stores its data as key-value pairs. We will find whether the key is stored in Redis or not and feed the client with the respective data needed. For this to achieve we will create a function that reads Redis for the key client is requesting.

export const fetchCache = async <T>(key: string, fetchData: () => Promise<T>) => {
const cachedData = await getKey(key);
if (cachedData)return cachedData
return setValue(key, fetchData);
}

When we will know the client is requesting data they have not visited yet we will provide them a copy of data from the server and also behind the scene make a copy inside our Redis database. So, that we can serve data fast through Redis in the next request.

We will write a function where it takes in a parameter of key and if the key exists in the database it will return us parsed value to the client.

const getKey = async <T>(key: string): Promise<T | null> => {
const result = await redisConnect.get(key);
if (result) return JSON.parse(result);
return null;
}

We also need a function where it takes in a key and set the new values alongside with the keys inside our database only if we don’t have that key stored inside of Redis.

const setValue = async <T>(key: string, fetchData: () => Promise<T>): Promise<T> => {
const setValue = await fetchData();
await redisConnect.set(key, JSON.stringify(setValue));
return setValue;
}

Until now we have written everything we need to implement Caching. We will just need is to invoke the function in our dynamic pages. Inside of our [id].tsx we will make a minor tweak where we can invoke an API call only if we don’t have the requested key in Redis.

For this to happen we will need to pass a function as a prop to our fetchCache function.

export const getServerSideProps: GetServerSideProps = async (context) => {
const { id } = context.query;
const name = id as string;

const fetchData = async () => {
const data = await fetch(`https://pokeapi.co/api/v2/pokemon/${name}`);
const response: PokemonDetailResults = await data.json();
return response;
};

const cachedData = await fetchCache(name, fetchData);

return {
props: {
info: cachedData,
},
};
};

We added some tweaks to our code we wrote before. We imported and made the use of fetchCache functions inside of the dynamic page. This function will take in function as a prop and do the checking for key respectively.

Adding expiry

The expiration policy employed by a cache is another factor that helps determine how long a cached item is retained. The expiration policy is usually assigned to the object when it is added to the cache. This can also be customized according to the type of object that’s being cached. A common strategy involves assigning an absolute time of expiration to each object when it is added to the cache. Once that time passes, the item is removed from the cache accordingly.

Let’s also use the caching expiration feature of Redis in our Application. To implement this we just need to add a parameter to our fetchCache function.

const cachedData = await fetchCache(name, fetchData, 60 * 60 * 24);
return {
props: {
info: cachedData,
},
};

export const fetchCache = async (key: string, fetchData: () => Promise<unknown>, expiresIn: number) => {
const cachedData = await getKey(key);
if (cachedData) return cachedData
return setValue(key, fetchData, expiresIn);
}

const setValue = async <T>(key: string, fetchData: () => Promise<T>, expiresIn: number): Promise<T> => {
const setValue = await fetchData();
await redisConnect.set(key, JSON.stringify(setValue), “EX”, expiresIn);
return setValue;
}

For each key that is stored in our Redis database, we have added an expiry time of one day. When the set amount of time elapses, Redis will automatically get rid of the object from the cache so that it may be refreshed by calling the API again. This really helps when we want to feed the client with the updated fresh data every time they call an API.

Performance testing

After all of all these efforts we did which is all for our App performance and optimization. Let’s take a look at our application performance.

This might not be a suitable performance testing for small application. But app serving thousands of API calls with big data set can see a big advantage.

I will make use of the perf_hooks module to assist in measuring the time for our Next lambda to complete an invocation. This is not really provided by Next instead it’s imported from Node. With these APIs, you can measure the time it takes individual dependencies to load, how long your app takes to initially start, and even how long individual web service API calls take. This allows you to make more informed decisions on the efficiency of specific code blocks or even algorithms.

import { performance } from “perf_hooks”;

const startPerfTimer = (): number => {
return performance.now();
}

const endPerfTimer = (): number => {
return performance.now();
}

const calculatePerformance = (startTime: number, endTime: number): void => {
console.log(`Response took ${endTime – startTime} milliseconds`);
}

This may be overkill, to create a function for a line of code but we basically can reuse this function in our application when needed. We will add these function calls to our application and see the results millisecond(ms) of latency, it can impact our app performance overall.

In the above screenshot, we can see the millisecond of improvements in fetching the response. This can be a small improvement in the small application we have built. But, this may be a huge time and performance boost, especially working with large datasets.

Conclusion

Data-heavy applications do need caching operations to improve the response time and even reduce the cost of data volume and bandwidth. With the help of Redis, we can deduct the expensive operation database operations, third-party API calls, and server to server requests by duplicating a copy of the previous requests in our Redis instance.

There might be some cases, we might need to delegate caching to other applications or microservices or any form of key-value storage system that allows us to store and use when we need it. We chose Redis since it is open source and very popular in the industry. Redis’s other cool features include data structures such as strings, hashes, lists, sets, sorted sets with range queries, bitmaps, HyperLogLogs, and many more.

I highly recommend you visit the Redis documentation here to gain a depth understanding of other features provided out of the box. Now we can go forth and use Redis to cache frequently queried data in our applications and gain a considerable performance boost.

Please find the code repository here.

Happy coding!

The post Caching NextJS Apps with Serverless Redis using Upstash appeared first on Flatlogic Blog.

Best ways to deploy React app

In this post, we will look at how and where you can host a web application. We will look at the main hosting platforms, their features, advantages, and disadvantages.

In this article, we will also look at what parameters you can choose to host for and how to choose it.

Often the deployment of your web or react application depends on which tutorial you read and often it only gives an example of one hosting service. But it would be nice to have other options as well. In this guide, we’ll show you a few other good ways to host your app.

We’ll take a small React application and deploy it to many services, each with its own set of features. I hope the application and deployments have helped you better understand how various apps fit into different deployment situations.

How to choose react or web hosting in 2022

Let’s take common considerations on what aspects to follow to choosing a hosting provider

Workflow

With the amount of configuration, monitoring, and upgrading that occurs over the course of a server’s lifespan, managing a production server may be a lot of effort. This parameter indicates how much real work you will have to do when hosting a web application. Many cloud services have made their success by automating a lot of application deployment work.

However, this setting does not work in such a way that the more work is automated, the better. Sometimes you may need a lot of flexibility in deployment configuration settings to effectively deploy applications.

Accordingly, if you need to host a simple React or Vue application, then most likely you should choose systems with the greatest automation, and vice versa, if you have a more complex application, then we advise you to choose a solution with a more complex customization options.

Application Type

Another factor to examine is the sorts of applications that are supported by hosting providers. Some services are only available in a limited number of languages. Furthermore, certain services are tailored to specific stacks (i.e JAM stack, MERN, LAMP). It’s important to deploy in a way that matches the look and feel of your app.

Security

We will not dwell on this aspect for too long, since it is clear that the more security options a hosting service provider has, the better.

Pricing

This is one of the most important parameters by which you can choose a hosting provider. The pricing of hosting providers often depends on performance and security features. Luckily, most solutions have a transparent pricing system with large explanatory tables, as well as free plans to try and deploy a simple application.

Performance

One of the most important parameters to consider when choosing your future hosting provider is that the user experience of your application’s customers will depend on it.

Application Architecture

Now let’s take a look at the type or architecture of the application you want to host with hosting providers. Depending on the type of application, you can also choose the service you will use to publish your program.

So let’s dig into the application types.

Frontend Only Application

These applications can be either pure static HTML/js or single-page applications written with React/Vue/Angular javascript frameworks. Static servers, which are essentially what services like Vercel and Netlify provide, or traditional hosts, where you upload files to some web server space that are statically served, are used to build these sites. These services link your deployment to your project’s Github, then run your project’s build command and deliver the output statically whenever you update GitHub.

Full-Stack Applications 

These are apps in which you develop a more complicated server (not static) that performs more extensive data processing and then leverages that data with a template engine (ejs, blade, erb, plush, pug) to generate static HTML that is then given to the client. This usually necessitates more sophisticated deployment services, which means either setting up your own server using a VPS from Digital Ocean, Amazon, Microsoft, Google, or other cloud providers, or utilizing a service like Heroku, which automates many of the setup tasks.

Serverless

Serverless options take web development to the next level, removing the need for any backend applications. Instead, all of your APIs are designed as a series of on-demand cloud functions with URLs that your front end may use to contact them. Because you don’t need a persistent backend server, and because static hosting for the frontend is substantially cheaper, a serverless method may be quite cost-effective even at huge volumes. Cloud function platforms are available from AWS, Azure, and Google.

Best react hosting services

Flatlogic

We want to make a disclaimer right away that the article was written by Flatlogic employees, so the first way to host a web application will be related to this platform.

Flatlogic is a new way and one of the fastest options to make a React/Vue/Angular full-stack application and host it. The process of creating and hosting an application literally takes a few minutes. Flatlogic automatically generates a fully working application according to your database schema. The application can be made on the following technologies:

Angular
React
Vue
Next.js
Nuxt
Laravel
Node.js
PostgreSQL

Once you select a stack, look at the database schema, and Flatlogic will generate a fully working application for you, with CRUD operations ready and working, as well as an auto-generated REST API.

Using the platform, you can build almost any business application, starting from cms for a blog, and ending with an ERP system. It should also be noted that Flatlogic uses the power of the google cloud to host applications, so security and performance issues should not arise.

Pricing

As for hosting, it costs $9 per month, regardless of the type of application, whether it is a static application or a full-fledged web application with a database. The only limitation is that you will only be able to host Flatlogic applications built on the same platform.

Building static apps with starter kits is free and you can create an infinite number of them. Access to the tool for creating CRUD applications costs $199 for 3 months to one type of stack, while the number of applications can also be unlimited.

Let’s take a closer look at how to make and host an application using the Flatlogic platform.

Creating the CRUD application with Flatlogic

Prerequisites

Before creating a project with Flatlogic – you should create an account and confirm it.

Choosing the Tech Stack

After you logged into the platform – you should click the ‘+ Add application’ button. After you click this button, you need to set the name of your application and choose the stack: Frontend, Backend, and Database.

Choosing the Starter Template

In this step, you’re choosing the design of the web app. For now, we decided to concentrate on one template for all stacks – Material. This step basically shows you what your app will look like. Later Flatlogic is planning to add more design systems.

Schema Editor

In this part of creating the application, you will need to create the database schema of your future application using our UI tool. In this step, you determine which tables and columns will be in your database, as well as the relationships between them.

If you are not familiar with database design and it is difficult for you to understand what tables are, we have prepared several ready-made example schemas of real-world apps that you can build your app upon modification:

E-commerce app;
Time tracking app;
Books store;
Chat (messaging) app;
Blog.

Final step

In the final step, you need to link your application to the GitHub account to push generated code to the newly created repository.

If you click on GitHub the ‘Login’ window opens next, where you need to enter login details for your GitHub account or sign in. Next, the ‘Choose a name for your repository’ window opens, where you have to choose a name for your repository and select privacy terms.

Deploying your created app

After all these steps your application will be created and automatically deployed for a preview.

You can also open the settings of one of your applications, which also has a Deploy button on the Review tab.

Afterward, this will open a window where you can review the step-by-step process of creating your application.

Docker is used to creating the right environment to deploy the backend and frontend, that is why it takes about 5 minutes. We also have a feature to notify you when your Live URL is ready by email.

You can also view the build logs if you click on View Log.

Conclusion

This is the basic process of creating and deploying full-stack applications. Additionally, you can customize the application made on the Flatlogic platform, all the changes will be automatically built and deployed to our platform.

Digital Ocean

The App Platform from DigitalOcean is a Platform as a Service (PaaS) solution that allows you to configure and deploy apps from a single source repository. DigitalOcean will build and deploy your app after you’ve configured it, providing you the benefit of a full web server and deployment pipeline with little effort. This may be a quick and effective method to launch your React applications, and you can utilize App Platform’s free tier if you’re using React to develop a site without a backend.

Pricing

The price for the full stack application starts from $5 per month if you want to use App Platform by Digital Ocean. Hosting static applications is free for certain limits.
Managed Kubernetes starts from $10;
Droplets start from $5 per month.

Features

A distinctive feature of Digital Ocean are the following advantages and features:

Very good community with many useful tutorials for developers. Digital Ocean invites experts to write guest tutorials, also buys popular sites and blogs on the topic of web application development, and then integrates the texts into its site.
Marketplace with many applications that can be integrated into your application in one click.
You can choose the capacity and number of virtual machines yourself. You can also select the regions in which these virtual machines will be located.
Also, with Digital Ocean, you can easily host a static or dynamic web application using the App Platform product. Where you can connect your repository, and the platform will do all the CI/CD work for you. The platform also includes analytics, monitoring, and alerts.

We will look at how to host and deploy a React application using the free features of the Digital Ocean platform.

Deploying to Digital Ocean App Platform

Following this guide, you’ll deploy a React application to the DigitalOcean App Platform. You’ll link your GitHub repository to DigitalOcean, set up the project for building, and start working on your first project. Each modification will result in a new build and update once the project is online.

You’ll be able to deploy an application using continuous delivery on DigitalOcean by the conclusion of this stage.

To get started, log in to your DigitalOcean account and click Create, then Apps:

After that, you’ll be asked which type of app and how you wish to deploy it. In our scenario, we’ll use Github source code to deploy.

After that, you’ll be asked to link your GitHub repository. If you haven’t already done so, log in with your username and password and grant DigitalOcean permission to access your repositories:

Select the repository you’d want to connect on the GitHub permission page once you’ve linked your accounts. You’re using the digital-ocean-app repository in this example, but you may connect more repositories if you want:

After selecting the repository, you’ll be taken to the DigitalOcean interface. After selecting digital-ocean-app from the list of repositories, click Next. This will establish a direct connection between your App and the GitHub repository.

After you’ve chosen your repository, you’ll need to set up the DigitalOcean App. By selecting Germany in the Region section, the server will be hosted in Europe, and the deployment branch will be the main. Choose the area closest to your physical location for your app.

You’ll be verifying Auto Deploy code modifications in this lesson. Every time you update the code, your app will be rebuilt automatically.

To go to the Configure your app screen, press Next.

Select the sort of program you want to launch next. Select Static Site or Web Services from the Type dropdown option in the Type field because React will create static assets.

You may also use your own unique build script. However, you may use the usual npm run build command in this instance. If you have a separate build script for quality assurance (QA) or production, you may wish to construct a custom build script:

To go to the Finalize and Launch page, press Next.

You may choose your price plan here. Choose the free Starter tier, which is designed for static sites:

When you click the Launch Starter App button, DigitalOcean will begin developing your app.

The app will execute your repo’s npm ci and npm build scripts. This will download all of the dependencies and generate a build directory with all of your JavaScript, HTML files, and other assets built and minified. In your bundle, you could also include a custom script. JSON and change the Commands in your App Platform application’s Components tab.

The construction will take a few minutes to complete, but you will receive a success message and a link to your new site once it is complete. Your connection will be named differently and will have a unique name:

To access your project in the browser, press Live App. It will be identical to the project you tried locally, but it will be available online with a secure URL:

https://appointments-management-system-aou5o.ondigitalocean.app

Now that your project is set up, any changes you make to the connected repository will trigger a new build. If you make a modification to the main branch in this situation, DigitalOcean will execute a fresh deployment for you. There’s no need to log in; the modification will take effect as soon as you push it.

You generated a new DigitalOcean app on the App Platform in this phase. You linked your GitHub account to the app and set it up to build the main branch. After setting the app, you discovered that every time you make a change, the app will deploy a new build.

Render

Render is a cloud service provider that offers both static and dynamic site services. Your React App may be hosted in three easy steps.

Render comes with a free SSL certificate, a global CDN, a custom domain, and auto-deployment with Git integration.

Render offers a free static site hosting plan as well as competitive pricing for other services.

While hosting websites on Render is free, other services like databases, cron tasks, Docker containers, and render disks must be paid for.

The company positions itself as the main competitor to Heroku with a more convenient pricing model and advanced functionality. This is a direct message from their website: “We’ve built Render to help developers and businesses avoid the cost and inflexibility traps of legacy Platform-as-a-Service solutions like Heroku.”

Pricing

Almost all services in Render start from free plans. Hosting of static sites, web services, databases, and Redis starts from $0 per month. Cron jobs service starts from $1 per month. Then most of the services start from $7 to $10 per month.

Core Features

Great for static sites – Render is particularly popular for launching single page or static websites, in addition to a variety of other useful features it offers.

Effortless and practical – Render does not tack on any extra charges to its services. It claims to be 80% less expensive than other hosting options. Additionally, any configuration and command can be accessed with a single click, making the entire process speedier than the other platforms covered in this article. Many developers have switched to Render because of this feature.

Deploying with Render

Make sure your project is stored in a GitHub repository before moving on to setting up an account on Render.

Then, on the dashboard, select New Static Site.

If you’re using Render for the first time, you’ll need to connect your GitHub or GitLab account, or wherever your repository is kept.

Once connected, look for and pick your project repository. Following that, you must give your web service a distinct name.

If your application is bootstrapped with Create React App, Render will recognize this and fill the configuration accordingly.

After clicking Create Static Site, your project will be deployed.

That’s all – so in a few steps, you can host a free static or dynamic site on the Render platform. In our opinion, indeed the platform is one of the easiest to use in the market for hosting websites and web applications.

Vercel

Vercel is the new approach in web deployment services that aims to simplify team collaboration while developing React, Vue, Angular, and Next JS applications. Vercel supports importing source code from Github, Bitbucket, and Gitlab. Vercel also provides some starter templates to create a new App and deploy it. It Provides continuous deployment, Serverless functions, HTTPS, and more.

Core Features

In our opinion, the two most interesting features of Vercel are Preview of Pull Request as well as a large templates library for starting a static application. Preview of Pull Requests Allows You to Very Effectively Collaborate with the Team.

The other cool feature is edge functions that allow you to extend your sciatic application with a couple of lines of code without developing a proper backend and database. Ideal for the small apps that solve one small task.

Pricing

Hosting hobby sites will cost you for free. Commercial use of the Vercel platform starts from $20 per month per seat with 1TB of bandwidth.

Deploy React app with Vercel

​​To deploy your project with Vercel, create a new account.

The dashboard panel will show after a successful login. You can install Vercel from the terminal using either this dashboard or the Vercel CLI; we’ll go through both approaches in depth. 

Integrate the Vercel dashboard with GitHub or other services where your application is stored. Select Import Project from your panel. You’ll be asked to select the project you’d want to use. Select the React project, click Import, and then type in a name for the project. Click Continue after leaving it at its default setting. When prompted for the root directory, choose it and click Next.

The following step is crucial. If you use the Create React App to start your React project, Vercel will automatically recognize it and provide an appropriate configuration for you. Click Deploy using the default settings. We keep the setup as is so that Vercel understands how to deploy the website correctly based on the configuration.

If you didn’t use the Create React App to begin your React app, you’ll be prompted for the setup. Fill in all of the configuration fields using the sample configuration above, then click Deploy.

After pressing the Deploy button, your react application will be available publicly. You can also manage the configuration with the help of Vercel Dashboard. For a fee, you will find the features of Vercel Functions and analytics using your application.

Heroku

Heroku is a cloud application platform with a large developer community that has existed since its inception. It supports a variety of programming languages, including Node.js, Ruby, and others. Heroku offers a free SSL certificate, a custom domain, and Git integration.

Core Features

You can set up your code in a couple of clicks using the built-in integration with GitHub. Also, good features are built-in Redis support, as well as the promotion of analytics of using your application.

Pricing

Hobbies Projects can be serviced on Heroku for free. If you want more advanced features such as SSL, analytics, or memory selection, then you will have to pay $25 per month for one dyno.

Deploying using dashboard

You may deploy via Heroku’s dashboard. To get started, make sure your project is saved in a GitHub repository.

Go to your Heroku dashboard, pick New, and then Build a new app to create a new app.

You’ll be presented with a popup asking you to name your project. After you’ve entered your app’s name, click Create app.

Sync your GitHub repository when you’ve finished building an app. On your app’s dashboard, you’ll see something similar to this.

After you’ve successfully connected your GitHub account to Heroku, you may search for and deploy the project repository. From the list of repositories, choose your project.

You’ll have two options for deployment: manual or automated, which means Heroku will automatically publish the new website whenever you upload changes to GitHub. For the sake of this lesson, we’ll utilize manual deployment.

When the build process is complete, go to Manual Deploy and select Deploy Branch, and your application will be deployed.

If you summarize then Heroku gives ample opportunities to hosting web applications, but in turn, you will need some time to explore the platform. Also, some of the customers complain of not completely transparent pricing and a fairly high price for hosting applications.

Netlify

Netlify is one of the most popular hosting services for web applications and static sites. Service is often used to place JamStack applications. The main feature of the platform is the simplicity of its use, namely the fact that the hosting application is performed literally in a few minutes by joining your repository and setting the pair of parameters. React App can be deployed in 3 steps. It also provides a free automatic HTTPS.

Netlify offers serverless functions, Forms, Analytics, CLI, API, and more in addition to deployment. The majority of these functions are available for free, however, there are some restrictions. 

Pricing

In terms of pricing, the service is regarded as a low-cost React host because its Pro Plan is $19 per month and its Business Plan costs $99 per month.

If you haven’t previously done so, sign up for a Netlify account.

You may use either the Netlify Dashboard or the Netlify CLI to deploy your app.

Deploying using Netlify drag-and-drop or Github connection

Some of the coolest feathers from Netlify is the ability to simply connect the GitHub / Gitlab or Bitbucket quickly contemplating the application. You can also let’s see in more detail how to do it.

If you want to deploy React app, you need to drag and drop the build folder onto the Netlify Dashboard. Run npm run build or yarn build before deploying the latest build.

If everything was done correctly, you will need to see the next screen.

Later you can set up a custom domain, set up HTTPS, or add different plugins and functions to extend your app.

If you want your changes to be automatically settled, then we advise you to select the Github / Gitlab or Bitbucket attachment option.

Select the project repository you wish to use for deployment.

After you’ve chosen a project, the next step is to configure it, which Netlify will do for you if you use Create React App boilerplate to get started. Your app will be deployed after you click the Deploy site button.

If everything went successfully you can see your site live. In case of some Netlify errors, it provides an opportunity to watch build logs.

In conclusion, we can say that Netlify is one of the simplest services for the deployment of simple React Web applications. The platform allows you to simply start your project into a public disorder, as well as expand it with new functionality at the expense of Netlify Functions and plugins.

GitHub Pages

GitHub Pages is one of the most popular and efficient ways for beginners to build websites. GitHub Actions can be used to automate deployments, set up CI/CD, and much more, making it easier to handle than many of the other technologies covered in this lesson.

If we touch the react application, it can be placed on Github Pages directly from the repository. Next, we will look at the main features of Github Pages, as well as how to set up the project on Github Pages.

Core Features and Advantages

Web, application, and software developers may use GitHub to access a range of services. The React app follows a simple protocol in which users download the app, create a repository, and utilize a command-line interface to distribute their pages.
Cost. It is entirely free to use GitHub to publish a website. On the other hand, using packages for certain programming languages and customization tools may be more costly.
Libraries that are open-source. Customers of GitHub have access to an open-source library that may help them create their websites or add features that make them more valuable. Additionally, due to GitHub’s popularity, customers may easily find customized solutions on the internet.

Deploying React app with Github pages

If you haven’t already, create a GitHub account and a repository for your application. When you create a new repository, you’ll obtain both the repository URL and the Git URL. Run the following command in the project root to set up the local directory as a Git repository, commit all the changes, and push it to the remote.

git init
git add .
git commit -m “initial commit”
git remote add origin (repository remote git url here)
git push -u origin master

If you will do all those commands, your project will be pushed to GitHub.

In your project’s package.json, add a homepage field, like this:

“homepage”: “https://myusername.github.io/my-app”

myusername is your GitHub username and my-app is your repository’s name.

Next, install gh-pages in your project.

npm install –save gh-pages

In your package.json, add the following scripts:

“scripts”: {
+ “predeploy”: “npm run build”,
+ “deploy”: “gh-pages -d build”,
“start”: “react-scripts start”,
“build”: “react-scripts build”,
“test”: “react-scripts test”,
“eject”: “react-scripts eject”
}

predeploy and deploy are the only additions to the scripts. predeploy will automatically run before deploy and make sure the latest build of the application is deployed.

Run the following command to deploy the application:

npm run deploy

This script will establish a new branch in your project’s GitHub repository called gh-pages. You may need to set a source, which you can do in your repository’s settings under the GitHub Pages option. It should be set to the gh-pages branch.

That is basically all. You can check the result by clicking on this link: https://stepnov.github.io/blog/ – this is a simple react blog hosted with Github Pages. In conclusion, we wanted to say that this is maybe the freest simple way to host a basic static web page on the market.

Surge

Surge is another very popular servile for the deployment front of the EAN projects and static sites. The advantages of this service are Almost Zero Configuration and the ability to fully interact with the CLI service. It provides Free SSL, Custom Domain Configuration. Hosting in surge might require some CLI skills.

There are two sorts of plans available. The first is called ‘Surge’ and is completely free. It also provides app developers with infinite publishing options via basic SSL and custom domain. Surge Professional is the second plan, which costs $30 per month.

Core Features

Surge is one of the easiest systems accessible for the cause, because of its simple command-line interface. The simplicity, on the other hand, comes at the expense of making goods and sites more complicated, dynamic, and configurable.
Surge may be the fastest platform for deploying React apps. According to consumers, the entire procedure takes less than 5 minutes, which is far faster than similar Amazon items.
Cloud-based – Like all of its rivals, it is a cloud-based platform. As a result, it provides its consumers with safe, quick, and constantly synchronized services.
Surge is cost-effective since it provides customers with free plans, making it excellent for novices and small organizations. It’s also handy for people who want to try their hand at web building as a pastime.

Run the following command in the project root directory to deploy the most recent build of the project:

Run the build command

Install Surge CLI globally: 

npm install -g surge

Run surge inside the build folder.

cd build
surge

Follow the prompts. First, you’ll be asked for an email and password:

Welcome to surge! (surge.sh)
Login (or create surge account) by entering email & password.
email: [email protected]
password:

Before filling in any other prompts, it’s a good idea to confirm your Surge account.

In the terminal, you’ll be asked to confirm your project directory. Hit Enter. You’ll see the domain of your project. Again, hit Enter. This will publish your application.

Conclusion

We reviewed the most popular methods of React Application Hosting. Our article had examples of both very simple products and complex solutions with a multitude of useful features and infrastructure setup capabilities.

Almost all products have a simple integration with Github and all take on the job with Ci / CD from the box.

In our opinion, if you want to save on the development and hosting of the web application, we immodestly recommend our Incrudition – Flatlogic.

For simple static sites, Netlify and Vercel are ideal.

If you want to publicly deploy a full-stack application, then do the Digital Ocean or Heroku.

The post Best ways to deploy React app appeared first on Flatlogic Blog.

363: Kyle Shook

This week I got a chance to talk to Kyle Shook. Kyle has started a new job at Foxtrot so we talked about what that process was like. In addition to creating all sorts of incredibly creative work on CodePen (just look at this Collection of Menus), Kyle helps other people level up their front-end skills too, with sites like Frontend Practice.

Time Jumps

00:30 Guest introduction

02:09 Where do you work?

04:37 How’d you find the new job?

12:25 Sponsor: Notion

13:18 What kinds of things did employers look for?

15:57 Hamburger menus

18:31 Bringing text to life series

22:51 Women whispering animation

25:22 Frontend Practice

30:39 Did you design all the projects?

32:35 Holiday sweater generator

34:27 The mine

34:39 Lemons still life

Sponsor: Notion

Notion is an amazing collaborative tool that not only helps organize your companies information, but helps with project management as well. We know that all to well here at CodePen, as we use Notion for countless business tasks. Learn more and get started for free at notion.com/codepen. Take your first step toward an organized, happier team, today.

The post 363: Kyle Shook appeared first on CodePen Blog.

Starting a Web App in 2022 [Research]

Participate in our research and get 70% OFF discount on all Flatlogic products! We will also make the final results public.

The team of Flatlogic is carrying out a global scientific research that aims to identify modern patterns of web application creation, specifically which tools and approaches are used to start web apps in 2022. This is the world’s first research dedicated to this specific topic.

The research is based on an anonymous online survey that consists of 20 questions related to web development. If you are planning to build a web app, whether you are an experienced software engineer or have no web development skills at all, you are eligible for the survey. We strongly ask you to take the online survey! It will help the global web development audience a lot to find out more about the recent approaches to web app development.

We focus on uncovering a diverse representation of the usage of technologies, stacks, methodologies and other dev instruments used by coders that will help us and global audience to understand the patterns of the modern web app creation process.

We plan to advertise the survey to our socials and seek ways to earn responses from those who may not be frequent on our sites.

We look forward to your responses on how to build a full stack web app — and if you share this survey on social media, be sure to tag us! We are commited to share the results with you.

Ready? Steady?
Go!

The post Starting a Web App in 2022 [Research] appeared first on Flatlogic Blog.

What is NPM?

Node Package Manager (npm) is one of the several package managers (default for Node.js) for JavaScript released in 2010. It is used to manage dependencies for packages.

npm  consists of: 

The npm’s website makes it possible to find third-party packages, create and manage your packages;
npm CLI;
The registry represents a huge database of public and open source private JavaScript packages online.

What is package.json?

You can copy any JavaScript project as an npm package containing information and a package.json job to describe the project. The package.json file is generated when npm init is running for initialization by your JavaScript or Node.js project with developers-provided baseline metadata: `name`, `version`,  `description`, `license`. 

What are the scripts?

The package.json file additionally features a script property for running command-line tools installed in the project’s local context. You can execute all of these by running `npm run-script <stage>` or `npm run <stage>` for short. You can run scripts from dependencies with `npm explore <pkg>` or `npm run <stage>` for short.

With the recent addition of `npx` (Node Package Executor), these project-related node_modules commands can be run just like a globally installed program.

dependencies or devDependencies?

They are represented as key-value objects, where the key is the names of the npm libraries and the value is their semantically formatted versions.

Install dependencies using the npm install command with the `–save` and `–save-dev`. They are intended for use in environments such as production and development/testing.

Understanding possible signs that come before semantic versions ( assume that you are acquainted with the `major.minor.patch` model of the server) is important:

`^` – latest minor release.

`~` – latest patch release.

What is package-lock.json?

The package-lock.json file defines the exact dependencies versions of the npm JavaScript project. The package.json is a descriptive common shortcut, so the package-lock.json is a table of ingredients.

The package-lock.json is typically created by the `npm install` command or `npm ci` for short.

More information about npm commands you can find here.

What are the differences between npm and yarn?

Let’s have a quick look at what is yarn? Yarn (or Yet Another Resource Negotiator) launched in October 2016 and is an NPM package for projects using Node.js packages. The yarn was developed to hide the weaknesses and bugs of npm packages as it is quick, stable, and secure. Likewise, it has a lock file that keeps versions of packages stably running in an identical project on multiple systems.

Now let’s compare yarn and npm:

Although Yarn is newer than npm, it appears to be more widely used and popular than npm.
npm doesn’t need to be installed because it’s included in the sub-core of Node.js. The yarn is a package of npm, so it can be installed with the command `npm install yarn`.

Both yarn and npm use similar management methods for dependencies. Both provide a package.json file in the root of the project’s working directory. All required project-related metadata is stored in this file. It helps to manage the dependencies versions of the project, scripts, etc. For both batch managers, the dependencies files are stored in the node_modules folder. In Yarn 2 this folder will by default not be supported anymore. Yarn and npm both provide an automatically generated lock file (yarn.lock and package-lock.json) with records of the exact versions of the dependencies used in the project. 
Security stands as another major point contributing to the yarn and npm. The yarn was originally considered more secure and the npm has been very successful in adding security enhancements.
Let’s compare the CLI commands:They have ​​some common commands:

Different commands for both tools:

These packages are both perfectly designed to manage and maintain your project’s dependency hierarchy. They have a great and supportive community. In conclusion, the choice between npm and yarn depends on your specific preferences and project requirements. 

The post What is NPM? appeared first on Flatlogic Blog.

362: Chris Nager

This week I got to speak with Chris Nager! I’ve known Chris quite a while. I remember being inspired by his hand-drawn SVG plus symbol and subsequent guide to <path> commands, which inspired my own shortly after I was properly obsessed with SVG. We talk about all sorts of things like accessibility, how far CSS has come, and some of the amazing stuff that has shipped recently in Safari Technical Preview. Check out Chris’ Twitter, personal site, and classic great project Give ‘n’ Go, a CodePen/Dribbble crossover website.

Time Jumps

00:24 Guest introduction

01:56 Hand drawing SVG

04:07 Dribbble and CodePen

06:55 Accessibility as a focus

09:04 Color-contrast function

11:30 Color mix function

13:20 inert and letting trim

15:37 Clamp function

16:28 Accessibility and JavaScript or React

22:12 Deploy previews are amazing

28:31 CSS logical properties and values

30:16 ThingUI

33:34 Using ch

The post 362: Chris Nager appeared first on CodePen Blog.

Creating a Laravel Project

Laravel architecture
Laravel history
The Pros of Laravel
The Cons of Laravel
Getting started with your own Laravel project
Laravel for backend
Building Laravel Projects with Templates
Building Laravel Projects with Flatlogic

Laravel is a PHP-based backend framework. It follows the Model-View-Controller design pattern which explains many of Laravel’s pluses and minuses that we’ll detail further on. Users often credit Laravel with responsiveness, scalability, and a good community. But not everything is so simple. Like many backend frameworks, it can be abstract and unintuitive. That is if you don’t have anyone to guide you.

In this article, we’ll talk about the history of Laravel, how it emerged, and how it won its position. We’ll take a closer look at the peculiarities of working with Laravel, and sum up the reasons to choose it or avoid it. Finally, we’ll dive deeper than usual into the inner mechanism of a simple app, and show you the code so you’ll know how to properly grease the gears. Keep reading!

Laravel Architecture

As mentioned, Laravel follows the Model-View-Controller architecture pattern. In this system, the Model is the part that manages the database and the data logic. The View is the user interface and all its interactive functions. The Controller is what differentiates MVC software from earlier practices. It mediates between the Model and the View, and makes the two largely independent of each other. It means easier development and maintenance, easier project management, and reusability of components.

Laravel History

Laravel was published in 2011, and it is a little over 10 years old now. By that time Taylor Otwell, the creator of Laravel, had been using CodeIgniter for quite a while. CodeIgniter was a solid backend framework and holds a small market share to this day. However, it had issues with authentication. Whenever you wanted authorization with Google or Facebook that we now take for granted, it required additional software that was hard to find in ready form. Otwell released the beta version of Laravel on June 9, 2011. The early Laravel supported a lot of the things that were missing from most backend frameworks back then. Those included authorization, views, sessions, routing, localization, and more.

Modern Laravel complies with MVC principles. But back in 2011, it did not support controllers. It became a true MVC framework in September 2011, with the Laravel 2 update. Laravel 3 came with a built-in command-line interface called Artisan. Furthermore, it had a lot more capacity for managing databases. At that point, Laravel was something largely similar to what it is today.

Laravel’s Pros

Simplicity

Backend frameworks have a reputation for being harder to grasp. While subjective, this approach has a grain of truth to it. Backend processes happen behind the scenes. They aren’t as easily demonstrable as front-end processes, and can thus be unintuitive. Laravel’s simple syntaxis and extensive use of plain PHP are a nice change of pace and a great opportunity for aspiring backend developers.

Security

Laravel is often credited for data security. One of the contributing solutions is the Eloquent ORM. This object relational mapper is included in the package and adds another abstraction level to the code. It presents data as objects making the data exchange safer and more efficient. Furthermore, Laravel can store passwords in encrypted form out of the box. Together with the overall sturdy build, this makes Laravel a safe and reliable technology.

Time and Resource Efficiency

Laravel’s initial light weight is just one of the reasons why it saves storage space and computing power. Laravel is awesome when it comes to testing separate parts of the software rather than the whole project. Any time you fix a bug, this feature of Laravel will save just a little time. But if you have to fix lots of bugs, that’s a huge asset!

Effective Mapping

Laravel’s mapping is optimized for using relational databases. This makes relational databases easier to connect to Laravel backend, and they run smoother and faster than on some other frameworks.

Built-in CLI

Laravel’s built-in CLI called Artisan is a huge asset in creating command-line applications. Artisan is an advanced CLI that lets you include tasks and migrations without additional tools and resources.

Strict Logic

Laravel complies with the MVC (Model-View-Controller) architecture. This design is helpful for structuring the code into intuitive logical areas. MVC solutions are usually less susceptible to bugs and more compliant when it comes to debugging.

Quality Community

Laravel’s community is extensive and helpful. Plenty apart from the extensive FAQs, a lot of forums and dedicated platforms orbit Laravel making it very hard to come across an issue you won’t find a solution to.

Laravel’s Cons

Possible Compatibility Issues in Older Projects

Laravel has grown tremendously since its introduction but that came at a cost. Newer versions have an array of features that don’t work properly with older versions. This can make older Laravel projects glitchy and slow. In other words, the opposite of what we value the most about Laravel.

Minimum Tools Included

We’ve mentioned what a great CLI Artisan is. However, other parts of Laravel don’t boast the same diversity of tools and components. The downside of choosing a lightweight framework is the likelihood of having to implement additional tools and some glue code to make them work together properly. This is not a frequent occasion but can sometimes negate the light weight of Laravel.

Inconsistent Speed

Laravel doesn’t shine when it comes to speed. Competitors like Yii and Symfony outrun Laravel in most scenarios. Bear in mind, though, that Laravel’s operation on the latest PHP version with JIT compilation hasn’t been extensively tested. So keep your mind open, the latest Laravel might turn out to be much faster.

Getting started with your own Laravel project

When working with backend frameworks, it’s harder to keep track of your progress. That’s one of the reasons why backend frameworks get a reputation for being hard and unintuitive. We don’t think it’s fundamentally harder. We think it just requires a bit more initial training. Let’s start with basics and progress one step at a time.

Installing pre-requisite software

To fully use Laravel’s arsenal of features, you’ll need to install some useful tools, and learn to use them. Let’s start with Docker. Docker is a virtualization solution. It lets us run software in sandbox-like environments called “containers”. Docker runs your code internally, without affecting any other software on your PC or causing any compatibility issues. What runs in Docker, stays in Docker. We suggest getting Docker Desktop. The real reason we need Docker is Sail – Laravel’s built-in command-line interface. It integrates with Docker perfectly. This basic setup will let you run intermediate versions of your project with ease.

Setting up a Subsystem

This step is highly recommended for Windows users. A Linux Subsystem allows for running binary executables. This is the least troublesome way to test-run Laravel code on Windows. Launch your Windows Terminal, preferably in administrator mode, and launch the WSL. The process is simple: just type ‘wsl’ in the PowerShell or another CLI.

Creating the Project

Everything’s set for creating our own project. I’ll let myself be vain about it and call it Al’s Laravel project. Except, we want to avoid any possible compatibility issues, so the directory will be spelled ‘als-laravel-project’. To create a project, we use the CLI to go to the directory we need to create the project and print:

curl -s https://laravel.build/als-laravel-project | bash

After a brief compilation, navigate your CLI again to the directory and move to the next step.

Creating the Project via Composer

This is another way to create a Laravel project. It has gained lots of popularity, and might be the most obvious method today. First, make sure you’ve installed both PHP and Composer. Then you can enter Artisan CLI and print the following:

composer create-project laravel/laravel example-app
cd example-app
php artisan serve

The above will create a local development server for Laravel.

Starting Sail

At this point, we can set up sail with one command. The ‘Sail Up’ command is easy enough to remember. Because we’re setting up our Sail, get it? If this is your first time launching Sail, the CLI will build application containers on your device. This takes a while but will make all subsequent Sail launches and operations faster. With the file structure there, you can access your application at http://localhost. In principle. This is just the structure of the future application and not the application itself. Let’s see what we can do next!

Primary Configuration

Laravel is often credited with the ease of setting up. Most Laravel projects require little to no initial configuration. However, you can explore the app.php file in the ‘config’ folder. It contains plenty of variables like Time zone, Laravel framework service providers, and URL Debugging. Like we said, most projects don’t require any configuration at this stage. If you’re just learning the ropes, we recommend learning to work with a basic Laravel project first. It will give you some context when you’re deciding how to configure the application.

Environment Configuration

Laravel supports developing, testing, and running your applications in different environments. Those include testing, deployment, production, and more. Adjusting your project for different environments happens by changing underlying parameters like caching directory. Environment variables are found in Laravel’s default .env file (or .env.example, depending on the method of Laravel installation that you’ve chosen).

Laravel for Backend

Laravel can be a great backend solution in many cases. Let’s list some of them!

Single-Page APIs

When building a single-page API, the small scale of the software built and the time spent implies a similarly minimalist approach to choosing the underlying technologies. We’ve mentioned how a Laravel project can be configured but in many cases that’s unnecessary. Laravel’s ease of configuration lets us create simple APIs in no time.

Next.js Applications

Next.js emerged to solve compatibility issues for Node – React applications, and that’s how it usually works. With Laravel, however, there’s another way to use Next.js. Laravel runs well as a backend of the Next.js application’s API. Laravel’s support of notifications and queues is impressive and helps use these features out of the box.

Semi-Full-Stack Framework

You might come across sources that claim Laravel to be a full-stack technology. That’s true to an extent. Laravel offers extensive possibilities for request routing. Also, if you’re interested in Laravel’s full-stack capabilities, take a closer look at Blade. Blade is Laravel’s integrated templating engine. It uses plain PHP which means no additional software will inflate your project. You can use Blade and transmit information to integral views lines. Laravel won’t work as a comprehensive front-end framework but brings along features that will be a great addition to plain JavaScript apps and landings.

Building Laravel Projects with Templates

Laravel is a highly popular framework so, naturally, there’s a huge supply of Laravel templates. One example is Flatlogic’s own Sing App Vue Template with Laravel Backend. Templates are possibly the easiest way to create a Laravel application. Especially considering the fact that many of those templates come with pre-installed front-end. The main challenge here is properly connecting all data endpoints to create a completely functional API.

To better understand how it works, we suggest trying the Sing App’s live demo. It is intuitive enough for most users to quickly understand how to manage a template-based application. Plentiful documentation will help resolve any issues and our support team is always ready to help you out here in case the documentation doesn’t cover it.

Building Laravel Projects with Flatlogic

Flatlogic Platform is our way of bridging the gap between developing your own apps and using templates. Applications running on the same technologies typically use the same elements and components. In many cases the main thing that makes them different on a technical level is the database schema that accommodates different mechanisms of data processing and storage. Flatlogic Platform allows creating applications by combining parts and building only the parts that need to be unique. It’s as easy as it sounds, and sometimes even easier. Keep reading to know more!

Step 1

The first page we see when creating our own project requires a name for the project and the tech stack. The name is pretty straightforward. Just pick one that is easy enough to associate with the project. The tech stack is the combination of technologies used in the project. The front-end, the database, and the backend to tie them together. Any combination will work fine, but given the article’s topic, we’ll choose Laravel as the backend technology.

Step 2

Next up, we’ll choose the design for our application. Currently, we’re redeveloping some visual options, so only the Material is available. But don’t worry, the others will soon be back and improved. Material design is Google’s design language used for UI compatibility of new software with Google services. Furthermore, its minimalist, unobtrusive nature works in most cases and for most users.

Step 3

The following page is the Database Schema that we mentioned earlier. The schema is the structure of the database that describes the relationships between columns, rows, and fields. This is an important part that largely defines how your application will process data. However, we’ve explored the more popular demands and included pre-built schemas perfect for eCommerce, Blogs, Social Networks, and more.

Step 4

Here we need to check if everything is according to plan. Check the stack, check the design, check the database schema, decide if you want to connect Git repository, and hit Finish.

Step 5

The next page offers us a plethora of ways to deploy and run our application. Deploy from scratch, deploy from GitHub… If you’re interested in the inner mechanisms of a Laravel application, you can view the actual code of the app.

Well done, sir or madam! You’ve created your very own Laravel App.

Conclusion

We’ve explained how to install Laravel and create your first project. That’s a solid first step for anyone who wants to learn Laravel development. For everyone else who needs a Laravel-based application but doesn’t have the time or the desire to learn the framework, we’ve offered two other routes. Both Laravel templates and Flatlogic Platform have a lot going for them. We might be biased but we usually recommend the Platform. It offers greater flexibility by allowing you to create applications with any combinations of technologies, designs, and database schemas.

Laravel is a controversial technology. It’s simple and beginner-friendly, but it requires additional research as you master Laravel development. It is one of the best and most versatile technologies including CLIs on the market yet can sometimes lack tools in other departments. We can definitely recommend Laravel to anyone who’s willing to learn backend development. Laravel offers plenty of features that speed up the development of compact, single-page applications, and large scale business solutions.

Related articles

Top 5 Admin Templates with Node.js Backend

Best Headless CMS in 2022

The post Creating a Laravel Project appeared first on Flatlogic Blog.

6 React Project Ideas to Help You Learn by Doing (Updated 2022)

Why do you need these React project ideas?

A list of React project ideas

Personal Productivity App

YouTube Comments Analyst

Weather App

Messenger Aggregator

Personal Expense Tracker

Recommendation App

Conclusion
Bonus
Creating a React App the quick way with Flatlogic

Everyone faced the dilemma of what app you should develop next to make progress in learning React. The project must be complex enough to make you think and google, but not too hard so you don’t feel overwhelming. And you are looking for a great article where you can find a brilliant React project ideas for your next project that just fits your skills.

Well… If it looks familiar, then that article can’t help you=)

This article doesn’t offer you to learn new skills, practice design, research new ways to provide great user experience, or something else… It’s about the challenge!

Why do you need these React project ideas?

The ideas in the article are supposed to push you beyond your limits, to force you to think furiously, to blow your mind with problems you are going to face. And much more…

That top is not about simple components and apps like quizzes, books apps, or note-taking up. Moreover, it isn’t necessary to take that challenge if you have just finished tutorials and started working on your first React project idea. It’s expected that you have already known the basic foundation of React Native development and have taken part in the development of some complex apps.

But don’t hurry to close the article if you are a new guy in programming! The ideas you find here are entertaining and interesting, and maybe someday when you get a lot of experience and acquire new skills you will ask yourself a question “What else can I develop?”. Then you will remember that you read that article with some fascinating ideas, then one of the ideas will come to your mind and bingo! You will understand what your next app will be about!     

Enjoy reading!

A list of React project ideas

Personal Productivity App

Image source: https://habitica.com/static/features

Everyone desires to be productive, achieve his dreams, be an iron-man / attractive girl, be disciplined, give up bad habits, and just be listed in Forbes top richest people. Let’s help them.

We don’t offer to invent a new productivity method since there is a bunch of them that already exist (for example, check this article). Also, we don’t expect you to create a holistic motivational system, like gamification in Habitica.  Our task is to make a calendar-based productivity app with reports, reminders, dashboard for tasks and habits. Let’s clarify all these basic components.

Calendar-based app implies that the users are supposed to plan their days, so the app should give them that opportunity with a calendar where they can set the time and day where they are going to accomplish tasks or devote time to acquire a new habit. The app has to remind users about upcoming events and what they have planned for today. You also should include instruments like to-do lists or dashboards in the app with different statuses of tasks like “to do today, tomorrow, this week, someday”. Next thing in the to-do list (your to-do list, not in the app) is to make reports about tasks accomplishment with different periods (a day, week, month), so your users become aware of their progress. After developing all these features the most interesting part of the app goes, check the list below.  

Ways to comprehend:

Add website and app blocker. This helps potential users not to be distracted by social media or notifications from other apps.
Make the phone goes into the silent mode when a user works with the app and gives users an ability to set the time or set conditions when the mode should automatically be enabled.

YouTube Comments Analyst

Image source: https://developers.google.com/youtube/v3

If you have a lot of followers on YouTube, you know how hard it is to understand what the mood of those one hundred thousand comments is. Are people happy watching your videos or they are bored?  Do you make an impact on people with your work and creativity? What followers wanted to see?

You can develop an app that analyses the comments for you and answers all your questions. The app is based on a dictionary of words with some values assigned to them. You can set different types of values, but let’s start with just two: positive value for words like “Awesome” and “Great” and negative value for words like “Bad”, “Useless”, “Boring”.  Then the app collects the comments (use YouTube data API) and calculates the total score.

Once it’s done, think about UI for the app. We need a field to input link to YouTube video, a pie chart to display total like and dislike amount, a histogram to plot the results for different sentiment groups of comments. 

 Ways to comprehend:

Add the history of videos you have checked and monitor the changes in sentiment over time.
Also, you can go further and try to calculate the impact on people via comments, but it’s harder since you need to add values not only to words but to word combinations too. (as an example, “that video inspired me to chase my dream!”)
Dive deep into the analysis and add the option to examine certain groups of comments. Why negative comments are negative? Do they have something in common? What are the most liked comments about? Are they good jokes or greeting to the author that other people share?

Weather App

Image source: https://openweathermap.org/city/3117735

A great React project idea is to make an app that displays a weekly weather forecast. The core requirement for the app is usable and clear user interface: users must get desired information (the weather forecast) just when they open the app. Users are more interested in two questions: what should I wear today and should I take an umbrella? So, it’s good to start just with temperature and precipitation. Drop the information about wind speed, cloud cover, the time of sunset and sunrise (of course with cool animation that definitely will take a few hours of development), etc. Let’s say you get it and now you need to show the weather for today. How?

The basic element to display weather forecast here is a day weather card. All cards with daily forecasts must be structured and well organized, so prepare to unleash your potential as an expert designer or just ask your friend to prepare a mock-up for you.

The second necessary feature is accuracy, so make sure that you pick a well-known and checked online service to forecast the weather. We advise to use the most popular websites like https://weather.com/, and more trusted API sources (like this).

You can guess that it’s time to add information about pressure, cloudiness, wind speed, etc. Well, we don’t think so. 

When the previous two steps are completed, think about UX and what features users may need. It’s good to start with adding the ability for users to change the period for days display: today, current week, 7 days, 10 days, 15 days, 30 days. Then make a report of hourly temperature changes and the chance of precipitation. Also, add the function of precise positioning and the ability to select several regions/cities to monitor. When everything is done and tested you get an informative app about the weather forecast for various periods in different regions. Maybe now it’s time to show additional information for the daily weather we mentioned above? Well, no, you still have a work to do, look through the list below.

Ways to comprehend:

Use graphic libraries to display daily changes in the weather or add a graphic representation of week temperatures.
Add a dynamic built-in map that displays precipitation over the time until now.

Running in background with push notifications about the rain, snow, high/low temperatures, or fog will be a great improvement for the app. 
How about the idea to make the app function on smartwatches? (and then you should feel free to publish the app on the Google Play and App store)
All right, fine, you can display pressure, wind speed, and whatever you want.

Messenger Aggregator

Image source: https://pixabay.com/

It can be hard to manage all chats and messaging services, like Skype, sack, What’s up, Viber, telegram, Google hangouts, etc. Try to build a universal messenger that combines them all. The must-be functionality: support of as many messengers and chats as you are able to set, the UI that allows users to switch between them quickly, support of push notifications for mobile and desktop, multilingual, ensuring the privacy of personal messages. As we have mentioned, there are a lot of variant messaging services. First, provide support for 5 messengers in most demand in your region and meet all requirements above. After that look through the list below.    

Ways to comprehend:

Add the ability to manage multiple accounts in any messenger. This function can be very helpful for businesses and very challenging for you: how many messengers can you set up with multiple accounts? 
Expand the functionality with synchronization of services across all devices you log in on so you don’t need to add it manually every time on a new device.
Allow your app to set rules for prioritization of the notifications by putting them on the top.
Just add MORE messaging services and chats!       

Personal Expense Tracker and Analyst (Using Big Data)

Image souce: https://www.mint.com/how-mint-works

Forget the second part about big data for a while and concentrate on building the basis of the expense app. The app should allow users to track their expenses and to analyze it. So, the core functionality here is adding the records of the cash flow. Expenses and income must be divided by categories and users should be able to create custom ones. To analyze cash flow the app creates charts for different periods with the ability to display expenses and income by categories. 

After that, the most fascinating part of the challenge goes: try to provide insight into users’ spending habits using all records from the previous periods (it takes time to create them first) with the help of artificial intelligence and big data. Teach it how to make predictions about future expenses based on previous periods, reveal budget lines that take extra money from users, accumulate as much information as possible, and create tips for reports, so even users with no financial background can understand where they spend their money.

Ways to comprehend:

Set up an integration with bank accounts and credit/debits cards.

Add some planning with budgeting. And more reports as a result. It’s not enough just to track your expenses, it’s necessary to learn how to control them.   

Comparison is a good tool to show alternative ways of spending money (for example you spend as much money on the bun as the cost of monthly gym membership).

Recommendation App

Image source: https://thespoke.co/

The concept is to provide users with movie recommendations based on their preferences. The fundamental features are rating, cards with pictures, a large database, nice-looking design, maybe swipe option. You don’t need to build a media player for various video formats. Your focus must be on the development of a clear user interface design and engaging interactions. The app should capture users’ attention and motivate them to provide necessary information about their interests so the recommendations would be accurate.    

Every way to comprehend implies a new branch of recommendations for different aspects of our lives. Implementing them all means that you have developed a universal recommendation app. Every branch requires the expansion of date base and new functionality. The list of branches you can find below:

Ways to comprehend:

Add dish recommendations. 
Let users discover new books
Expand the database with musical artists and help users to find a new sound.
Integrate the app with training services with online courses.

Challenge yourself and bring to life React project ideas

Knowledge is of no value unless you put it into practice.

So you’ve spent dozens of hours learning a new technology, in this case React. However, only practice will provide an opportunity not only to consolidate knowledge, and also it can add impressive projects to your portfolio. Any employer wants to see some projects done, despite the fact that you may not have any work experience yet.

In this case, it is important to decide on the technology stack. There is simply no time and effort to study two or three alternatives at once.

Therefore, we decided to help determine the choice of specialization as a bonus. You can often find information about the advantages of a particular framework or library. We will write about possible unpleasant surprises that may await when implementing the aforementioned React project ideas.

Together we are strong, but separately we will perish. This aphorism best describes the ambiguous situation with this library. On the one hand, React has huge community, tens of thousands of specialists from different countries.  Open source and the ability to create new modules, in addition to its advantages, has disadvantages in the form of incomplete guidance, lack of support and inability to find solutions. Even the official React site still provides examples of class components, although the community and the library itself have chosen the functional components and hooks course.

Looking at Stack Overflow, which has over 255 thousands React questions, some thoughts also pop up. On the one hand, you don’t have to worry about the lack of an answer to your question, and on the other hand, you can doubt the quality of the library. After all, if something works well, then should there be any questions?

React is an opinionless library; this means that she has no opinion on how to solve problems that touch on all aspects. So it is up to you and your team to come up with an opinion on what to do with a particular react project idea, and especially what other libraries you want to use. Of course, you will be using third party libraries because you don’t want to reinvent the wheel. And there are many different options in React.

There are many similar react project ideas, but you won’t fund two projects with the same dependencies, project structure, and guidelines. This means that knowledge cannot be transferred from project to project, as it can in the case of Angular or Vue.

Thanks for reading.

Bonus!

We’ve listed 6 easy variants to learn React by doing. Now we’ll offer you two more React project ideas. One is the most beginner-friendly option, and the other a more challenging option. Also, we’ll offer an easier path you’ll want to follow if you’re done with challenges for the day;)

Calculator App

For those who are just starting out with React and don’t have too much time to learn the deep intricacies. A calculator app is about as basic as it gets. The functionality and the interface are easy to adjust, and the app’s operation is easy enough to check. Does it calculate properly? Voila! You’ve done a great job.

The Value of this Challenge

This won’t challenge experienced developers. But those with no expertise but a strong desire to learn by doing would benefit from starting small. A minimal challenge provides an intermediate checkpoint where you can evaluate your progress and get that small bit of gratification that will help motivate you to achieve more.

e-Commerce App

Apps for eCommerce are an infinitely scalable challenge. Based on your experience and spare time, you can make a very basic or a more complex solution. This will require some back-end and database-building skills apart from React mastery. A simple React eCommerce App may only have a primitive database with two or three parameters of each entry and a simple input procedure. As your experience grows, you can introduce more data relationships and inner mechanisms. Each layer of parameters, features, and pages brings out new opportunities for creating yet more features based on those that are already there.

The value of this challenge

eCommerce Apps rarely display unique functionality. The real challenge here is navigating the architecture of a complex, multi-storied App and creating an end product that’s easy enough to navigate for the users. Additionally, eCommerce Apps are a frequent use case for React, and you’d be amiss to skip it in your front-end practice.

Creating a React App the quick way with Flatlogic

As promised, a quicker and easier way to create a React App. This way has many uses but fits eCommerce especially well. The Flatlogic Platform lets you combine parts and elements to create an App of your own. Next up are the steps necessary to do it.

#1: Name the project

Name your project. This way the project will be easier to address and find in case you start another one.

#2: Choose stack

An App’s stack consists of technologies its front-end, back-end, and database run on. In this example, we’ll pick React but any combination will work.

#3: Choose the design

The Platform offers several (we keep adding new options or merging existing ones, so the number might change) design schemes. Take a look at each one and decide which one feels the most natural to you.

#4: Choose the schema

Define the parameters of your database. Fields, columns, types of data, and the way the App processes entries – all of that must be defined. Or you could save some time and stick with one of the presets. They’re tailored to popular demands and at least one of them will likely fit.

#5: Review and generate

Check your choices, see if everything is fine. Choose “Connect GIT Repository” if you want to. Hit “Finish”.

Flatlogic Platform will compile for a couple of minutes and introduce you to your App. Deploy it, host it locally, or push it to GitHub, and make good use of it! Happy developing!

You might also like these articles:

Top 5 Free Awesome React.js Material-UI Admin Dashboard Templates

13 Bootstrap Date Pickers Examples
Top 19+ Remarkable JavaScript Data Table Libraries and Plugins

The post 6 React Project Ideas to Help You Learn by Doing (Updated 2022) appeared first on Flatlogic Blog.