June 2022 Summaries

The tutorial provides a comprehensive guide on building a Recipe Application using Strapi as a backend and Vue.js as a frontend, emphasizing the integration of authentication features. It begins with instructions on setting up a Strapi project using either npm or yarn, followed by creating a Bookmarks Collection Type to manage user data. The guide details setting permissions, obtaining API credentials from the Edamam recipe API, and configuring Vue.js with necessary packages like Vue-Axios and Vue-router for API calls and routing. TailwindCSS is integrated for styling, and Font Awesome is employed for icons. The tutorial also covers user registration, login, and password recovery functionalities, utilizing Strapi's email services for password reset. Alexander Godwin, the tutorial's author, concludes by encouraging readers to apply these methods to their projects, highlighting his approach of learning through practical application.

In this tutorial, we will be integrating user authentication into a Strapi Application using Vue.js as our frontend framework. We will create the following pages and functionalities: 1. Login Page 2. Register Page 3. Forgot Password Page 4. Reset Password Page 5. Bookmark Recipe Functionality 6. Logout Functionality 7. Email Services Configuration To achieve this, we'll be using the following packages and technologies: 1. Strapi CMS (Content Management System) 2. Vue.js (Frontend Framework) 3. Axios (HTTP Client for making API requests) 4. @strapi/admin-sdk (Strapi Admin SDK to interact with the Strapi API) 5. @strapi/provider-email-nodemailer (Email Provider for sending emails) 6. Nodemailer (Node.js module for sending emails) 7. Gmail (Email Service Provider) 8. Vue Router (For routing between different pages in our application) 9. Vuex (For state management in our application) 10. Bootstrap-vue (For styling and responsive design) By the end of this tutorial, you should be able to create a fully functional user authentication system for your Strapi Application using Vue.js as the frontend framework.

The tutorial provides a comprehensive guide on building a real-time chat application using Strapi, Socket.io, React, MongoDB, and PostgreSQL, emphasizing the importance of real-time messaging in chat apps. It details the process of setting up a PostgreSQL database with Strapi, creating a Strapi app, and integrating it with PostgreSQL using both quickstart and custom setup options. The guide also covers configuring Nodemailer for sending emails, implementing JSON Web Token (JWT) for authentication and authorization, and using Strapi to store user credentials. Furthermore, the tutorial explores setting up a chat environment with Socket.io for real-time communication, integrating a message storage system in Strapi, and establishing a simple login form with React. It also outlines creating a secure chat application with role-based authentication, where active users are managed in Strapi, and an admin can remove users. The tutorial concludes by encouraging users to leverage Strapi's capabilities to build more advanced applications, offering a GitHub repository for reference.

In this tutorial, we will be building a chat application with role-based authentication using React and Strapi version 4. We will cover the following topics: 1. Setting up the project 2. Creating a user registration form 3. Implementing email verification 4. Building the login system 5. Role-based authentication 6. Creating a chat room with socket.io 7. Implementing role-based access control (RBAC) 8. Testing and deployment By the end of this tutorial, you will have built a fully functional chat application with user registration, email verification, login system, role-based authentication, and real-time messaging capabilities. To follow along with this tutorial, you should have basic knowledge of React, Node.js, Express, and MongoDB. You can also refer to the GitHub repository for the complete code: https://github.com/AustinOsuji/chat-app-strapi-react Let's get started! 1. Setting up the project First, create a new React app using Create React App: ```bash npx create-react-app chat-app cd chat-app ``` Next, install the following dependencies: ```bash npm install axios antd socket.io-client styled-components ``` 2. Creating a user registration form Create a new file `UserForm.js` in the `src` directory and add the following code: ```javascript import React, { useState } from "react"; import { Input, Button, Form } from "antd"; import { UserOutlined, LockOutlined } from "@ant-design/icons"; import axios from "axios"; const UserForm = () => { const [form] = Form.useForm(); const onFinish = (values) => { console.log("Received values of form: ", values); axios .post("http://localhost:1337/api/auth/local/register", { username: values.username, email: values.email, password: values.password, }) .then((response) => { console.log(response); alert("Registration successful!"); }) .catch((error) => { console.log(error); alert("An error occurred during registration."); }); }; return ( <Form form={form} name="register" onFinish={onFinish}> <Form.Item name="username" rules={[{ required: true, message: "Please input your username!" }]} > <Input prefix={<UserOutlined />} placeholder="Username" /> </Form.Item> <Form.Item name="email" rules={[{ type: "email", message: "Please input a valid email!" }]} > <Input prefix={<MailOutlined />} placeholder="Email" /> </Form.Item> <Form.Item name="password" rules={[{ required: true, message: "Please input your password!" }]} > <Input.Password prefix={<LockOutlined />} placeholder="Password" /> </Form.Item> <Form.Item> <Button type="primary" htmlType="submit"> Register </Button> </Form.Item> </Form> ); }; export default UserForm; ``` 3. Implementing email verification To implement email verification, we will use the `nodemailer` package to send emails with a unique token for each user during registration. Create a new file `sendEmail.js` in the `src` directory and add the following code: ```javascript import nodemailer from "nodemailer"; const transporter = nodemailer.createTransport({ service: "gmail", auth: { user: process.env.EMAIL, pass: process.env.EMAIL_PASSWORD, }, }); export const sendVerificationEmail = async (user) => { try { const token = crypto.randomBytes(20).toString("hex"); await axios.post("http://localhost:1337/api/auth/local/send-verification-email", { email: user.email, url: `${process.env.CLIENT_URL}/verify?token=${token}`, }); const info = await transporter.sendMail({ from: process.env.EMAIL, to: user.email, subject: "Verify your email", text: `Please click on the following link to verify your email: ${process.env.CLIENT_URL}/verify?token=${token}`, }); console.log("Email sent:", info.response); } catch (error) { console.error(error); } }; ``` 4. Building the login system Create a new file `LoginForm.js` in the `src` directory and add the following code: ```javascript import React, { useState } from "react"; import { Input, Button, Form } from "antd"; import { UserOutlined, LockOutlined } from "@ant-design/icons"; import axios from "axios"; const LoginForm = () => { const [form] = Form.useForm(); const onFinish = (values) => { console.log("Received values of form: ", values); axios .post("http://localhost:1337/api/auth/local", { identifier: values.email, password: values.password, }) .then((response) => { console.log(response); alert("Login successful!"); }) .catch((error) => { console.log(error); alert("An error occurred during login."); }); }; return ( <Form form={form} name="login" onFinish={onFinish}> <Form.Item name="email" rules={[{ required: true, message: "Please input your email!" }]} > <Input prefix={<MailOutlined />} placeholder="Email" /> </Form.Item> <Form.Item name="password" rules={[{ required: true, message: "Please input your password!" }]} > <Input.Password prefix={<LockOutlined />} placeholder="Password" /> </Form.Item> <Form.Item> <Button type="primary" htmlType="submit"> Login </Button> </Form.Item> </Form> ); }; export default LoginForm; ``` 5. Role-based authentication To implement role-based authentication, we will use the `jwt-simple` package to generate JWT tokens with user roles during login. Create a new file `generateToken.js` in the `src` directory and add the following code: ```javascript import jwt from "jwt-simple"; import moment from "moment"; const secret = process.env.SECRET; export const generateToken = (user) => { const expirationTime = moment().add(1, "days").unix(); const token = jwt.encode({ user, exp: expirationTime }, secret); return token; }; ``` 6. Creating a chat room with socket.io To create a real-time chat room, we will use the `socket.io` package to establish a WebSocket connection between the client and server. Create a new file `chat.js` in the `src` directory and add the following code: ```javascript import React from "react"; import { Input } from "antd"; import "antd/dist/antd.css"; import "font-awesome/css/font-awesome.min.css"; import Header from "./Header"; import Messages from "./Messages"; import List from "./List"; import socket from "socket.io-client"; function ChatRoom() { return ( <ChatContainer> <Header room="Group Chat" /> <StyledContainer> <List users={users} id={id} username={username} /> <ChatBox> <Messages messages={messages} username={username} /> <Input type="text" placeholder="Type your message" value={message} onChange={handleChange} /> <StyledButton onClick={handleClick}> <SendIcon> <i className="fa fa-paper-plane" /> </SendIcon> </StyledButton> </ChatBox> </StyledContainer> </ChatContainer> ); } export default ChatRoom; ``` 7. Implementing role-based access control (RBAC) To implement RBAC, we will use the `express-jwt` package to protect certain routes based on user roles. Create a new file `authMiddleware.js` in the `src` directory and add the following code: ```javascript import jwt from "jsonwebtoken"; import dotenv from "dotenv"; dotenv.config(); export const authMiddleware = (req, res, next) => { try { const token = req.headers.authorization.split(" ")[1]; const decodedToken = jwt.verify(token, process.env.SECRET); req.userData = decodedToken; next(); } catch (error) { res.status(401).json({ message: "Invalid token" }); } }; ``` 8. Testing and deployment To test the chat application, run the following commands in separate terminal windows: - `npm start` to start the React client - `npm run server` to start the Strapi server You can now access the chat application at http://localhost:3000. To deploy the application, you can use platforms like Heroku or Vercel. That's it! You have successfully built a chat application with role-based authentication using React and Strapi version 4.

The article delves into the intricacies of user management within Strapi, a content management system, emphasizing the importance of proper Authorization and Authentication in cybersecurity. It outlines how Strapi facilitates user management through its Users and Permissions Plugin and Role-Based Access Control (RBAC) in the admin panel, differentiating between end-users and admin users, similar to regular users and page administrators on Facebook. The text further explains the implementation of local authentication, the use of providers for user login, and the assignment of roles, such as Author, Editor, and Super Admin, within a sample blog setup to demonstrate practical applications of these concepts. Additionally, it highlights the significance of managing user roles and permissions, encouraging the use of Strapi's features to enhance application security and compliance with data regulations. The article serves as a comprehensive guide for developers to understand and implement user management effectively, offering insights into both the technical and practical aspects of using Strapi for secure user access control.

This article discusses user management in Strapi, a popular open-source content management system (CMS). It explains how to manage authentication and authorization for end-users and admin users using Users and Permission Plugins. The article also covers role-based access control (RBAC) for admin users in the admin panel, local authentication, and providers' use for end-users authentication with Strapi. The key points of this text are: 1. User management is crucial for cybersecurity and data compliance regulations. 2. Strapi allows user management using Users and Permission Plugins and RBAC in the admin panel. 3. Authentication ensures users are who they claim to be, while authorization controls access based on roles. 4. The User and Permissions Plugin manages end-users, while the administration panel handles admin users' roles and permissions. 5. Default roles include Author, Editor, Super Admin for end-users, Public, and Authenticated for admin users. 6. Local authentication involves registering and authenticating users with their login credentials on Strapi. 7. Providers allow users to sign in or register using third-party services like GitHub, Facebook, or Google.

Strapi has closed a $31M Series B round of funding led by CRV with participation from Flex Capital, Index Ventures, and other notable investors. This new funding will enable the company to accelerate its development, invest in the open-source community, and deliver on its mission to empower millions of people to share and manage content. With over 45K stars on GitHub, Strapi is one of the fastest-growing open-source projects and the most customizable Headless CMS, with thousands of companies using it to save time developing future-proof applications. The company plans to launch a new product called Strapi Cloud, which will offer a seamless deployment process that requires no DevOps skills, and invest in improving the editing experience for content editors, as well as custom fields and integrations with other tools. With this funding, Strapi aims to build a sustainable business, accelerate its growth, and unlock the creation of a massive open ecosystem.

The tutorial provides a comprehensive guide on creating a Notion-like application using Strapi and Next.js, highlighting the integration of Strapi as the content management system and Next.js for the frontend. It begins with instructions on setting up a Strapi project and a Next.js server, emphasizing the use of GraphQL for data queries and mutations. The tutorial covers creating, updating, and deleting pages and content blocks, explaining the setup of the GraphQL client and the use of hooks for data interaction. It also introduces UI creation using MUI and demonstrates how to implement content blocks with the Draft.js-based editor, enabling users to add, edit, and delete content. The guide concludes by detailing the setup of static and dynamic routes in Next.js and providing information on how to run the application locally.

This tutorial guides readers through creating a Notion clone using Strapi and Next.js, focusing on setting up the Strapi backend. Strapi, an open-source content management system, serves as the content hub, allowing the creation and storage of data structures, which will later be accessed through a GraphQL API. Readers learn how to set up a Strapi project, create an administrator account, and use Strapi's admin interface to establish collections for pages and content blocks, with integrated relationships between them. The tutorial also covers installing GraphQL to facilitate data retrieval and modification through queries and mutations, demonstrated using the GraphQL playground. The forthcoming second part promises to delve into developing a Next.js client to interact with the GraphQL API, enhancing the project's functionality.

The tutorial outlines the process of building a forum website using Strapi for content management and Next.js for the front-end. It begins by setting up a Strapi project using Node.js to create and manage application content with an admin panel, and details how to create collections for posts and comments. The Next.js framework is employed to develop the front-end, featuring pages for displaying forums and posting new questions. The guide covers the integration of Axios for data fetching from Strapi and the implementation of user authentication via Google using NextAuth. It also includes instructions for setting up protected routes and handling user data for posting questions and answers. Throughout the tutorial, code snippets and explanations are provided for setting up the project structure, styling, and connecting the front-end with the Strapi back-end, culminating in a fully functional forum application with user authentication and data management capabilities.

The tutorial series focuses on building an eCommerce website using Strapi, Jekyll, Tailwind CSS, and Snipcart, with the recent installment detailing the creation of the homepage. This part of the series highlights the integration of a hero section and dynamic displays for best-selling products and weekend deals, utilizing the Jekyll-Strapi plugin to connect frontend and backend components. The tutorial explains how to set up and configure the Jekyll-Strapi plugin, create and query Strapi collection types, and use Liquid Templating Language for displaying dynamic content. It also includes guidance on structuring HTML and CSS using Tailwind, with an emphasis on maintaining clean and readable code. Future parts of the series will cover the implementation of a product catalog and displaying product details on individual product pages.

Strapi is an open-source headless CMS that simplifies development by providing fast and secure APIs, making it easier to access content. Jekyll is a static site generator used for creating personal websites, blogs, documentation websites, corporate websites, etc., and is the engine powering GitHub pages. Tailwind is a utility-first CSS framework for rapidly building custom user interfaces. Snipcart is an easy-to-implement shopping cart platform that can be integrated with just two lines of code. To complete this tutorial series, one needs to have Node.js and NPM installed and set up Strapi as the headless CMS, install Jekyll as the preferred static site generator, and set up the frontend using Tailwind CSS template. The next steps involve adding products to the backend, creating dynamic auto-generated slugs for the product collection type, storing products in different collection types, and allowing access to the backend by editing user roles and permissions.

The tutorial series guides users through creating an e-commerce website using Strapi, Jekyll, Tailwind CSS, and Snipcart, with the current installment focusing on setting up the project's layout. In this part, the process involves creating header and footer templates using Jekyll's custom layouts and includes tags, which allow for modular page design by incorporating content from other files. The article provides code snippets for these components, highlighting the flexibility and customization Jekyll offers. Additionally, readers are instructed to start the Jekyll development server to view the website's homepage, which now features the newly implemented layout. The tutorial emphasizes the importance of understanding Jekyll's includes and layouts tags, which will be instrumental in subsequent sections covering the homepage addition to the e-commerce site. Links to the final source code for both the frontend and backend repositories are provided for further exploration.

The final part of the series on creating an eCommerce website using Strapi, Jekyll, Tailwind CSS, and Snipcart focuses on implementing cart functionality with Snipcart. Initially, users need to register with Snipcart to obtain an API key, which is then incorporated into the `default.html` file for global access across the website. The code in the `default.html` file is updated to include Snipcart's CSS and JavaScript to enable the shopping cart feature. Additionally, modifications are made to the `product.html` layout to include an "Add to cart" button, which uses Snipcart's attributes to handle product details like ID, name, price, and description. This setup allows users to add multiple products to their cart, which updates automatically, enhancing the website's functionality by providing a seamless shopping experience. The series concludes with references to the final source code repositories for both the frontend and backend components.

In the fourth installment of the series on building an eCommerce website using Strapi, Jekyll, Tailwind CSS, and Snipcart, the focus is on creating a product catalog and individual product views. This guide builds on previous parts where a GET request was established between the Jekyll frontend and the Strapi server using the Strapi-Jekyll plugin. Within this segment, users are instructed to add a collection for products in the Strapi endpoint and implement Liquid templating in conjunction with Tailwind CSS to display the product list. It involves creating an HTML file for the product catalog that loops through products and uses a set layout for each product page to dynamically render product details. The tutorial concludes by setting up individual product pages, each linked via a permalink, and hints at the next segment, which will cover cart functionality integration with Snipcart. Links to the final source code for both the frontend and backend are provided for further exploration.

In the concluding part of a series on building an eCommerce website using Strapi, Jekyll, Tailwind CSS, and Snipcart, the focus is on implementing cart functionality with Snipcart. After setting up the backend and frontend in earlier parts, and creating layouts and product views, this section guides users through registering for a Snipcart account to obtain API keys necessary for integration. The integration involves updating the HTML of the website with Snipcart's scripts and modifying the "Add to cart" button in the product layout to enable cart functionality. This allows users to add various products to a cart that updates automatically. The completed project provides links to both frontend and backend repositories for users to access the final source code.

The tutorial outlines the process of setting up a headless CMS and eCommerce website using Strapi, Jekyll, Tailwind CSS, and Snipcart. It begins with instructions on installing Strapi as the CMS, requiring Node.js and NPM, and setting up the project in a code editor. Jekyll is used as the static site generator, with guidance on installing it using Ruby and Bundler. Tailwind CSS is integrated into the Jekyll setup to streamline the development of custom user interfaces. The guide explains creating product collections in Strapi's backend, including defining collection types and configuring a slug system for easier product querying. User permissions are adjusted to allow frontend access to the backend, enabling GET requests without authorization. The tutorial concludes by preparing the backend for product and category additions, setting the stage for developing the eCommerce website's frontend.

The tutorial series details the process of creating an e-commerce website using Strapi, Jekyll, Tailwind CSS, and Snipcart, focusing on building the project's layout in its second installment. This part covers the creation of header and footer templates by utilizing Jekyll's custom layout and includes tags, which are essential for structuring the website's pages. The tutorial guides users through setting up the layout by adding specific code snippets to the Jekyll project's default layout file, as well as creating the header.html and footer.html files within the _includes folder. Additionally, it provides detailed instructions on styling and structuring the header and footer, including links for navigation and social media icons. The tutorial also explains how to start the Jekyll development server, allowing users to see the changes live on their local machine, and sets the stage for the next part, which will focus on adding the homepage to the e-commerce site.

This tutorial guides you through creating an eCommerce website using Strapi, Jekyll, Tailwind CSS, and Snipcart. In this part of the series, we create the homepage of our website, which includes a hero section, best-selling products, and weekend deals sections. We use code snippets to add content to the index.html file in the project's root folder. To connect Strapi with Jekyll, we install the Jekyll-strapi plugin and configure it in the config.yml file. We then create separate files for bestsellers and weekend deals sections and include them in our homepage. The final source code is provided for both frontend and backend repositories.

In this tutorial, we continue building an eCommerce website using Strapi, Jekyll, Tailwind CSS, and Snipcart. We create a product catalog and single product views by making GET requests to the Strapi server from the Jekyll frontend. We use Liquid templating to loop through products and display them on a page. Additionally, we create a layout for each product and add it to the Strapi endpoint in our config.yml file. The next part of the series will focus on implementing cart functionality with Snipcart.

A headless CMS and a digital experience platform (DXP) offer distinct approaches to managing and delivering content, with both providing significant benefits to organizations. A headless CMS focuses on content management by separating the backend from the frontend, offering scalability, efficiency, and security, while allowing developers to retrieve and present content through APIs. In contrast, a DXP integrates various technologies to deliver comprehensive digital experiences across multiple channels, using tools like business intelligence and customer data platforms to enhance customer engagement. Despite their differences, a headless CMS can serve as the core of a DXP, enabling seamless content management and data analysis to support business strategies. Strapi, a leading open-source headless CMS, exemplifies this dual functionality by offering customizable, self-hosted solutions that integrate with various APIs and databases, making it an effective tool for both content management and digital experience creation.

Strapi, a highly customizable CMS, has released a new version offering enhanced customization, integration possibilities, and several new features. Users can now easily customize the admin panel logo through a simple drag-and-drop or URL pasting method, improving efficiency for agencies serving diverse clients. The Strapi Market has evolved to include providers that extend plugin functionalities, and Strapi is phasing out support for Node.js 12, urging users to upgrade to newer versions for security reasons. The latest beta version introduces media library folders for better file organization and TypeScript support, enabling developers to leverage TypeScript's advantages in their Strapi applications. The community is encouraged to participate in the ongoing development through feedback, contributions, and monthly community calls, ensuring that Strapi continues to grow and improve with the support of its users.

Strapi recently hosted a successful Plugin Week, culminating in its first-ever hackathon, aimed at celebrating plugin creators and showcasing the capabilities of Strapi Plugins. Throughout the week, various sessions, workshops, and hangouts were held, and daily streams covered different aspects of Strapi Plugins. The hackathon saw enthusiastic participation, with over 15 submissions displaying impressive creativity and quality. The winners included Boaz Poolman's Strapi URL Alias Plugin, Razvan Ilin's Chartbrew Plugin for Strapi, and a tie for third place between Vivek M. Agarwal's Strapi Custom API Builder and Cameron Paczek's Strapi Generate Schema Plugin. The event also led to the creation of a curated Plugin page featuring resources for building Strapi Plugins, and a playlist of videos demonstrating how these plugins work, encouraging continued engagement with the Strapi community beyond the event.

The tutorial outlines the process of creating a 3D portfolio website using Vite, React, Three.js, and Strapi, highlighting how these tools can be utilized to build an interactive and visually appealing web application. Strapi serves as the open-source Content Management System (CMS) for managing and creating customizable APIs, while Vite offers a fast JavaScript development environment that enhances frontend development efficiency. Three.js provides an abstract layer over WebGL, simplifying the creation of 3D graphics, and React is used as the framework for building the frontend interface. The guide walks through setting up Strapi for backend content management, using Vite and React to run the development server, and leveraging Three.js to create 3D elements and animations. It also includes steps for integrating Axios to fetch data from APIs, configuring a scene with lighting and geometry in Three.js, and adding styling to complete the portfolio's presentation. The tutorial emphasizes the flexibility and power of these tools for web development, encouraging developers to explore further possibilities with Strapi and its integration with other technologies.

To create a blog website using Strapi as the backend, Nuxt for the frontend, and Apollo for requesting the Strapi API with GraphQL, follow these steps. First, create a new Strapi project using `npx create-strapi-app` and install necessary plugins like GraphQL. Then, create a new Nuxt application using `yarn create nuxt-app`. Install UIkit and Apollo Client in the frontend to style and fetch data from the backend. Configure Apollo Client with GraphQL queries for fetching articles, categories, and other data. Create components for displaying articles, categories, and other pages. Write GraphQL queries for fetching specific data and use markdownit to display content. Finally, navigate through categories using the new components and enjoy your newly created blog website!

The text is a comprehensive tutorial on building a personal habit tracker application using Strapi, a headless CMS, and React with the MUI library. Initially, it guides users through setting up the Strapi backend to store data and create collection types for habits and logs. It then transitions to setting up the React frontend, where users create forms and components to add and display habits, utilizing libraries like date-fns and axios for handling dates and HTTP requests. The tutorial highlights the flexibility of Strapi's Query Engine API over its REST API, allowing for custom database queries to efficiently fetch and display data, such as checking off completed habits. Throughout, the tutorial emphasizes Strapi's capabilities in managing complex queries and bulk operations, culminating in a working habit tracker that connects seamlessly between the backend and frontend. The author, Marie Starck, is a full-stack developer with a penchant for frontend technologies and a flair for writing tech tutorials.