## Introduction to the content management system

Nowadays, Websites are switching from no-code website builders (WordPress, Wix etc) to the latest technology stacks like React.js, Next.js, Django, Flask etc. WordPress takes too much time to load pages.

There are many alternatives for no-code website builders like [webflow](https://webflow.com/). You can check out the [pricing plans](https://webflow.com/pricing) to develop a no-code website on this platform.

There are 2 types of possible data on the website

1.  Static Data

2.  Dynamic Data

Let's suppose, a [blog website](https://blogs.abhidadhaniya.com/) holds static data which is not gonna change frequently. We can use a content management system to manage those data without appending static content in the code repository. That's why CMS (Content management system) came into the picture.

These 3 cms platforms are becoming powerful and these are easy to integrate with javascript frameworks.

## [Sanity.io](https://sanity.io/)

![Sanity - Abhi's Blogs](https://cdn.hashnode.com/res/hashnode/image/upload/v1675932907107/c5867227-bf02-4516-ab82-468550670301.png?auto=compress,format&format=webp)

Sanity is a content management solution for a website that holds some static data in an entire website like websites of small and individual businesses, portfolio websites etc.

**Pros of sanity**

-   Sanity is a very good option to integrate with react app

-   Easy to setup and integrate

-   Sanity studio works in localhost as well as production level

-   Useful for client websites and full fill their requirements

-   The clean and beautiful user interface of sanity studio

**Cons of sanity**

-   Not so good support for rich text or you can say the content of markdown

-   Can not embed code because of no markdown support in rich text

## [Contentful](https://www.contentful.com/)

![Contentful - Abhi's Blogs](https://cdn.hashnode.com/res/hashnode/image/upload/v1675932928738/18c077cd-537b-45dc-b677-7a8a883bf995.png?auto=compress,format&format=webp)

Contentful is the best solution for static websites like my [blog](https://blogs.abhidadhaniya.com/) website. I like contentful because of its simplicity and the relationship between various collections models.

**Pros of Contentful**

-   Simplicity and clean user interface

-   Easy to connect SDK (Software development kit) and client configuration

-   Works on only contentful platform (Means you have to manage content on their web app)

-   GraphQL API support

-   CDN Support

-   Image upload support

-   Markdown support in the rich text editor

-   Good for blogs content management

**Cons of Contentful**

-   Not supported on localhost

## [Strapi](https://strapi.io/)

![Strapi - Abhi's Blogs](https://cdn.hashnode.com/res/hashnode/image/upload/v1675932922179/ea6db9e5-913d-43d6-a570-dfec29f94c5c.png?auto=compress,format&format=webp)

Strapi is the best content management system for API development. Strapi is easy to use and set up and more time-consuming while working with a data model for backend development. Strapi is built for API development purposes

**Pros of Strapi**

-   The best solution to powerup the backend servers

-   Strapi is an Open-source project ([GitHub Repository](https://github.com/strapi/strapi))

**Cons of Strapi**

-   A little bit tough to deploy the Strapi backend

-   Can not deploy freely

You can compare pricing plans for all of these cms at here. [Sanity](https://www.sanity.io/pricing), [Contentful](https://www.contentful.com/pricing/), [Strapi](https://strapi.io/pricing-self-hosted).

## Conclusion

We can't compare all cms with each other. All content management systems had been made for some special purpose to solve some problems in real-world applications. Strapi is built for API development. Sanity is for website content management and Contentful is (Good for blog applications) for both but only accessible from its web app.

CMS is becoming a good options to manage content in websites do check it out the differences among these powerful platforms.

Powerful content management systems - Sanity vs Contentful vs Strapi

## Problem statement

Currently, I’m pursuing computer engineering in Vidhyanagar, Anand. In our vvn(vidhyanagar), There’s a problem for students while in search of food to eat at noon and night.

Students like me, wasting their around 1 hour deciding what to eat in food, We’ve options but still can’t decide what to eat.

> Having too many options create confusion.

### Food options

-   Mug pulav (One of the famous food items in vvn)

-   Gujarati dish at a fixed price

-   Other fast foods

> Note: [Foodie VVN](https://www.foodievvn.com/) is a product by [Gigaweb](https://www.gigaweb.in/)

Here’s the post about Gigaweb.

## The solution that we’ve founded

We’ve developed a web app that provides restaurants, cafes, lounges and tiffin services. Especially this will help those students who are new in vvn. In this web app, we also provide a food menu which will be updated by restaurant owners.

### Functionalities

-   Searching functions

-   [Filter restaurants](https://www.foodievvn.com/category/restaurant) by category - [Cafe](https://www.foodievvn.com/category/cafe), [Lounges](https://www.foodievvn.com/category/lounge), and [Tiffin services](https://www.foodievvn.com/category/tiffin-service)

-   Filter restaurants by food - [Gujarati](https://www.foodievvn.com/food/gujarati), [Punjabi](https://www.foodievvn.com/food/punjabi), [Chinese](https://www.foodievvn.com/food/chinese), [South Indian](https://www.foodievvn.com/food/south-indian), and [Fast food](https://www.foodievvn.com/food/fast-food)

-   Owner right to update food menu

### Features

-   Secure and fast server connectivity

-   Install as a mobile application

-   Clean and eye catchy user interface

-   Smooth user experience

-   User-friendly and responsive

## Add restaurants functions

Any user or restaurant owner can submit restaurant data and once we verify it from our admin panel, It will publicly available.

## Market survey

All lounges write daily food on board at their place. What happens if we bring those data in our foodie vvn app. It saves up to 1 hour for students.

We’ll not only list out lounges but we are including tiffin services as well. So that owners of tiffin services don’t need to share the food menu with students every day anymore.

We’ve analysed the market by visiting the restaurants in vidhyanagar and this application will be helpful for them again it’s a useful platform to publicity and list out their restaurant.

## About Foodievvn Web app

### Used technologies

-   [React.js](https://reactjs.org/) for frontend

-   [Firebase](https://firebase.google.com/) for server and database

-   [Progressive web apps](https://web.dev/progressive-web-apps/) (PWA) technology to convert web app in to mobile application

## Marketing

We’ve created awesome posts for social media marketing, especially for an Instagram post here is the post that we’ve shared.

We’ve created an account for foodie vvn on Instagram where we will publish some useful content which will be beneficial for students.

Follow [Foodie VVN](https://www.instagram.com/foodievvn/) for further updates on Instagram.

## Conclusion

Foodie vvn is a good option for students to save up to 1 hour daily to decide what to eat every day.

In this post, I've described a problem and depth solution in vidhyanagar using web app technologies.

Foodie VVN

Here's How We solve a daily problem for students

> Warning: This [xlinks.pro](https://www.xlinks.pro/) is not working right now because of I've hosted this web app in heroku and heroku is no more free to deploy backend apps.

Recently, I've build a platform [xlinks.pro](https://www.xlinks.pro/) to link all social media links together. I've used MERN Stack technology to develop this full stack application. I've implemented CRUD operations in REST Api. If you don't know about CRUD operations, Don't worry, I'm here to explain.

```
C - Create
R - Read
U - Update
D - Delete
```

It is the kind of database (MongoDB) operations in backend with the REST Api.

## Why I build this MERN Stack Application?

[Me](https://twitter.com/AbhiDadhaniya3) and my developer friend [Rohan K.](https://twitter.com/rohan_jpeg) were working on a large scale project where I was working on backend authentication and all kind of stuffs like that. When, I was dealing with google signin, I don't know that how can I deal with google login and even I also don't know that Can I build that functionality using client ([React](https://reactjs.org/)) or backend (Node.Js & Express.Js). ![xlinks.pro](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7o6zu7847lm78fgy95ek.jpg) For trying purpose, I started that functionality to implement with [passport.js](https://www.passportjs.org/) which is a popular library for authorization in Javascript. Passport.Js has so many strategies to authenticate user. Also they've strategies for third party authentication.

> Tip: Here is the difference between [authorization and authentication](https://www.onelogin.com/learn/authentication-vs-authorization).

After dealing with passport.js with Node.Js and Express.Js, I feel tired and hard way to implement with google login. Then I've tried to find the answer : to implement google signin using react package and I founded packages to integrate google signin with React.Js. There are 2 popular packages to integrate with google signin.

1.  [react-google-login](https://www.npmjs.com/package/react-google-login)
2.  [react-oauth/google](https://www.npmjs.com/package/@react-oauth/google)

Both are good packages to integrate signin functionality in react application. But I was facing some problems while installing 1st react-google-login package where it was showing that react-google-login doesn't support react > 18. That's why I was facing some problems in build process of deployment and I couldn't found any solutions to fix these npm errors and finally at the end, I decreased versions of react, react-dom and react-scripts and I fixed all errors of my application.

## Features of this MERN Stack application

-   Google login function on client side
-   Beautiful UI & UX using Tailwindcss

### Dependencies

#### Client side

-   Toastify
-   React-google-login
-   Axios
-   React icons
-   React meta tags
-   React share : to share in twitter
-   Tailwindcss, Autoprefixer, Postcss

#### Server side

-   Cors
-   Dot env
-   Express
-   Mongoose

## Purpose to develop this application

-   To implement CRUD operations in Api.
-   To create REST Api.
-   To implement signin functionality - integrated with google

## Quick tips for terminal while installing npm packages

-   `ctrl + c` to break the terminal processes.

-   `--force` to install any packages forcessfully.

-   To delete file or folder In Linux terminal (or git)

```
rm -rf <filename or foldername>
```

## About xlinks.pro

First of all, user have to [singin in with google](https://www.xlinks.pro/signin) in this [application](https://www.xlinks.pro/). After signin, User can go to dashboard and create their profile by filling their social media links data in a form and then When user click on update profile, This application takes little bit time to add userdata in database. Then, user can share their profile in twitter where I've used [react-share](https://www.npmjs.com/package/react-share) npm package. (where we can integrate with all social media sharing links.)

> Tip: I used [toastify](https://www.npmjs.com/package/react-toastify) ([official website](https://fkhadra.github.io/react-toastify/introduction/)) to give better ui and ux in xlinks.pro

## Conclusion

Thanks for reading this blog. Hope you understood about [xlinks.pro](https://xlinks.pro/) Don't forget to create your profile in xlinks and add your profile's link your all social media account.

xLinks is a MERN Stack web app to create links for social media bio.

3 Posts found for Development

Powerful content management systems - Sanity vs Contentful vs Strapi

Here's How We solve a daily problem for students

xLinks pro - Clone of Bio.link

Want to build brand website?

3 Posts found for Development

Powerful content management systems - Sanity vs Contentful vs Strapi

Here's How We solve a daily problem for students

xLinks pro - Clone of Bio.link

Get the latest updates

Want to build brand website?