DAOs enable people to form organizations with decentralized leaders, run on top of a cryptocurrency where the community and believers have a decentralized voting power as tokens instead of shares. They're often described as a way for people to avoid the hierarchical centralized systems in corporations.

As DEFi came to build a new internet-native financial system, DAOs are here to decentralize the governance layer in legacy business structures and offer the promise of enabling a focus on community, rather than just profit.

#What is a DAO ?

In 2013, co-founder of Bitshares, Steem, and EOS blockchain Dan Larimer described Bitcoin as a type of DAO, using the metaphor of cryptocurrencies as shares in a “Decentralized Autonomous Corporation” (DAC) with the goal of earning profit for shareholders by providing services on the free market. Five days later, then author at Bitcoin Magazine Vitalik Buterin (now co-founder of the Ethereum blockchain), pointed out that corporations are “nothing more than people and contracts all the way down”.

The concept of DAOs has since been popularized by blockchain communities, especially in the Ethereum ecosystem. The software language of the Ethereum protocol allows automated, smart contracts for the enactment of composable governance processes and mechanisms, and DAOs are proliferating as an open field of experimentation in automation, governance, and autonomy. DAOs have been referred to as a site of algorithmic governance for further ethnographic enquiry.

#DAO lifecycle

DAOs are undertaking different ways towards becoming a DAO. The majority takes a transition through a progressive route to decentralization.

The typical growth of a DAO consists of Idea stage, getting believers, early contributors, token raise, governance setup, treasury setup, development program, sustainable revenue and full decentralization.

According to Yury Lifshits the founder of SuperDAO we can define each stage as following :

*Idea stage

Leader + purpose + name

To get started, one needs a name for the DAO (can be a working title), a leader, and the purpose of the organization. The purpose needs to be stated from the perspective of members and supporters (why we want this DAO to exist) and not from the perspective of the creator. In other words, articulate what kind of good things the DAO will make for its members and the general public.

*Believers

Founding members + written roadmap + public profile

Manually invite most ideologically motivated people and draft together a plan of action. How do you want the DAO to work and what are you planning to make? The decisions on tokens, NFTs, and governance systems can wait, focusing primarily on value creation at this point. With founding members and a draft roadmap, an “upcoming DAO” profile can be created to attract more members.

*Early contributors

Contributor loop + reward system

Figure out the most common and repeatable tasks the early members can do to help your DAO. Then, propose rewards for those actions. Rewards can include special achievements NFTs (designed for status, not speculation), whitelist membership for future NFT minting and token airdrops, and options to buy future NFTs/tokens at an exceptionally low price.

*Initial capitalization

Token raise or primary NFT sale

Introduce DAO’s main token or its primary NFT collection representing membership. By this stage you will have two types of members — the ones who earn their membership via labor contributions and the one acquired through primary sale. In other words, you are now mixing “work to join” with “buy to join” models. You still can be pre-screening buyers and limiting the secondary market for memberships if it's important for your specific DAO.

*Governance setup

Partial decentralization + voting

Transferring some governance rights from creator to community. Typical decisions to delegate include financial parameters (“tax rate”), curation, investing, featuring, budget and grant approval, token allocations, and elected roles.

*Treasury setup

Treasury composition + liquidity + spend management

Diversifying DAOs treasury to include its native token, unminted primary NFTs, major coins, stable coins, tokens from related DAOs (e.g. from the blockchain of choice) and fiat. Partnering with liquidity providers and lenders for loans, guaranteed exchange rates, and yield programs to generate more interest and currencies needed for contributor compensation.

*Development program

Payroll + grants + project-based hiring + bounty program + programmatic incentives

Recruiting contributors, including engineering, business roles, influencers, customers, and ecosystem partners. Using fiat, token and NFT-based compensation models. Automating rule-based compensation, including giveaways and airdrops.

*Sustainable revenue

Member dues + secondary royalties + service review + licensing

Long term revenue models for DAOs include annual fees for holding membership NFTs (aka “property tax”), royalties from secondary NFT trading, paid services and gas fees, DAO-owned IP licensing.

*Full decentralization

Governance layer + operating layer

Separating governance activities (policy, budgeting) and operating layer (an ecosystem of “labs” providing development and operation services. The main token may be split into a governance token (voting powers) and a utility token (ecosystem currency) at this point.

To be more accurate, there is no 100% correct framework for starting a DAO and each DAO one has its own and unique journey.

#Why DAOs fail ?

Because they are vulnerable to both social and technical attacks, DAOs are likely to fail.

Based on the ethereum blog: DAOs are vulnerable to collusion attacks … In a democracy, for example, the whole point is that a plurality of members choose what they like best and that solution gets executed; in Bitcoin on the other hand, the “default” behavior that happens when everyone acts according to individual interest without any desire for a specific outcome is the intent, and a 51% attack to favor a specific blockchain is an aberration.

Technical attacks can be software code bugs creating security errors.

Alyssa Hertig also stated that unstoppable code can pose a problem: It’s difficult to change the rules of the DAO once it’s deployed to the Ethereum blockchain. The same framework that prevents a person or entity from altering the organization without consensus from the community can also cause problems, the main one being that any gaps in the framework aren’t easily closed. That can lead to potential theft, money loss or other disastrous consequences.

Conclusion

I believe DAOs potentially have the ability to transform the legacy business structure despite the absence of a clear framework for DAOs including the legal part. Wyoming passed a law earlier the year of 2021 that recognized DAOs and gave them the same legal power as LLCs. However they are still unrecognized. Until that happens, they're likely to be widely adopted.

#Bonus

To obtain legal status as a registered corporate entity (in the US), a DAO must:

• be deployed on a public blockchain
• provide a unique public address so anyone can view their operations
• software code must be open-source, software code must be audited, laypeople able to read smart contract variables and token restrictions
• governance must be decentralized in the technical architecture of the DAO
• at least one DAO member
• a contact point
• a binding dispute resolution mechanism for participants
• a dispute resolution mechanism for interacting with third parties, outside of the DAO.

I hope you enjoyed reading about this topic, if you would like to explore more here are the resources :

What Is a DAO?

A decentralized autonomous organization, or DAO, is an organization that’s governed by code instead of leaders.

Alyssa HertigCoinDesk

DAOs, DACs, DAs and More: An Incomplete Terminology Guide

One of the most popular topics in the digital consensus space (a new term for cryptocurrency 2.0 that I’m beta-testing) is the concept of decentralized autonomous entities. There are now a number of groups rapidly getting involved in the space, including Bitshares (also known as Invictus Innovations…

Ethereum FoundationEthereum Foundation Blog

Experiments in algorithmic governance continue

Trying not to fail at Decentralised Autonomous Organisations (DAOs)

Kelsie NabbenKelsie - on the cataclysmia of digital infrastructure

The DAO Playbook from Superdao & friends

The DAO Playbook 👋 Intro This is a step-by-step guide on how to start, manage, and grow a decentralized autonomous organization (DAO). The initial version is written by Yury Lifshits (CEO Superdao) and is heavily based on insights from Roadmap club, an informal community of DAO operators and inf...

Google Docs

How DAOs and blockchain can improve the way we organize

Decentralized autonomous organizations, or DAOs, are changing the way we think about how corporations work, and how they might work in the future.

Brynly LlyrWorld Economic Forum

As I was looking for new projects built using the Neo4j graph database, and especially the interesting use cases, I came across this markup language called Aspen, read more about it on the Neo4j community and told myself : “WOW, this is a fascinating work that deserves to be shared and celebrated !”.

In this article, we will discover together this project built by Quadri Sheriff and Matt ( I’m not sure about their real names but those are on Github :p ) using Ruby.

Sections:

1. What is Aspen?
2. Run some examples
3. Limitations

#1# What is Aspen?

Aspen was made in 2020 and it’s a simple and friendly markup language that translates what you write on your text editor, to a Cypher query, by running a single command line.

What I liked the most about Aspen is the easy to remember syntax.

If you are new to Cypher and don’t have time to learn it, Aspen may be your awesome tool (and you have a simple data model).

#2# Run some examples

# Example 1

If we want to model a relationship between cats and dogs saying :

cats like dogs ;

In Aspen would be:

default:
    label: Animal
-----
(cats) [like] (dogs)

In the Neo4j browser (graph view) :

# Example 2

If we want to model a relationship between cats and dogs saying :

cats like dogs and also dogs do like cats

We are discussing here a reciprocal (undirected) relationship, and this is a quite different syntax, to let Aspen know about it:

In an Aspen file, we have the discourse written at the top, and the narrative written at the bottom, always split by a line of just four dashes: ----

*Discourse:

By default, if you don’t put any name inside the label, Aspen will name it Entity and assume the text inside the parentheses is the name of that entity. Aspen can't automatically know that (dogs) and (cats) are Animal nodes, so we have to tell it using the discourse, following a YAML structure.

* Narrative:

This is the section where we write our description and observations in a narrative way with the use of () for names and [] for relationships.

Here is a minimal version for the same example:

reciprocal: like
----
(cats) [like] (dogs)

Output:

MERGE (entity_cats:Entity { name: "cats" })
MERGE (entity_dogs:Entity { name: "dogs" })

MERGE (entity_cats)-[:LIKE]-(entity_dogs)
;

# Example 3

Now let’s take a complex example (not that complex but fine):

*We have three points A, B and C, each point has its own latitude and longitude.

*We have two insects ( bug and ladybug ) moving from A to C passing by B.

I did it this way (you can find your own):

Aspen file:

allow_only:
  edges:
    - Located at
    - Moved to
default:
    label: Point
    label: Insect
    attributes:
        Latitude: latitude
        Longitude: longitude
----
(Point: A) [Located at] (Latitude: 3.33)
(Point: A) [Located at] (Longitude: -4.44)

(Point: B) [Located at] (Latitude: 5.33)
(Point: B) [Located at] (Longitude: -5.44)

(Point: C) [Located at] (Latitude: 6.33)
(Point: C) [Located at] (Longitude: -6.44)

(Insect: bug) [Moved to] (Point: A)
(Insect: bug) [Moved to] (Point: B)
(Insect: bug) [Moved to] (Point: C)

(Insect: ladybug) [Moved to] (Point: A)
(Insect: ladybug) [Moved to] (Point: B)
(Insect: ladybug) [Moved to] (Point: C)

Cypher output:

MERGE (point_a:Point { name: "A" })
MERGE (latitude_3_33:Latitude { latitude: 3.33 })
MERGE (longitude_4_44:Longitude { longitude: "-4.44" })
MERGE (point_b:Point { name: "B" })
MERGE (latitude_5_33:Latitude { latitude: 5.33 })
MERGE (longitude_5_44:Longitude { longitude: "-5.44" })
MERGE (point_c:Point { name: "C" })
MERGE (latitude_6_33:Latitude { latitude: 6.33 })
MERGE (longitude_6_44:Longitude { longitude: "-6.44" })
MERGE (insect_bug:Insect { name: "bug" })
MERGE (insect_ladybug:Insect { name: "ladybug" })

MERGE (point_a)-[:LOCATED_AT]->(latitude_3_33)
MERGE (point_a)-[:LOCATED_AT]->(longitude_4_44)
MERGE (point_b)-[:LOCATED_AT]->(latitude_5_33)
MERGE (point_b)-[:LOCATED_AT]->(longitude_5_44)
MERGE (point_c)-[:LOCATED_AT]->(latitude_6_33)
MERGE (point_c)-[:LOCATED_AT]->(longitude_6_44)
MERGE (insect_bug)-[:MOVED_TO]->(point_a)
MERGE (insect_bug)-[:MOVED_TO]->(point_b)
MERGE (insect_bug)-[:MOVED_TO]->(point_c)
MERGE (insect_ladybug)-[:MOVED_TO]->(point_a)
MERGE (insect_ladybug)-[:MOVED_TO]->(point_b)
MERGE (insect_ladybug)-[:MOVED_TO]->(point_c)
;

Back to the Aspen syntax used in this example:

• The allow_only provides protections that catch typos in node labels and edge names
• In the example we have two types of nodes : Insect and Point, how could be the best way to let Aspen know about it? Here comes (Point: C) and (Insect: ladybug) to distinguish between both types
• Aspen automatically translate Moved to into MOVED_TO in cypher

In the Neo4j browser (graph view) :

#3# Limitations

Every software has its limitations and Aspen also does. I have tested many cases but unfortunately, the more complex your use case is, the more text you should write, and many use cases don’t seem to be covered yet.

Given that underscores are not allowed, and node’s name is not customizable, also as you mentioned in the last example, I couldn't put many labels in one statement.

I think these problems are due to the lack of sponsor and contribution to this project as it’s new and only two developers are involved in its roadmap.

Conclusion:

To sum up, Aspen is interesting and its contributors are looking to improve it by adding schema and attribute protections, building a connector to communicate directly with a development/test/production Neo4j instance to publish data, also developing a UI so you don’t have to run code locally or walk through your directory looking for the generated file.

Resources:

GitHub - thepeergroup/aspen: Aspen is a markup language for turning text into graph data (via Cypher for Neo4j).

Aspen is a markup language for turning text into graph data (via Cypher for Neo4j). - GitHub - thepeergroup/aspen: Aspen is a markup language for turning text into graph data (via Cypher for Neo4j).

thepeergroupGitHub

Aspen - Simple graph data

Aspen - Simple graph data

CJ PatoiloAspen - Simple graph data

Check Out Some of This Year’s Graphs4Good GraphHack Projects

Discover with that Neo4j Community created for our Graphs4Good GraphHack event, which includes a number of amazing COVID-19 projects.

Karin WolokNeo4j Graph Database Platform

A design pattern in general is an abstract, reusable solution to a commonly occurring problem within a given context or use case. As a mongoDB modeler you should know those modeling concepts and make use of them , each design for a specific use case .

In this article I will introduce the common problems handled by each pattern , then - inside each concept - explore examples and use cases to show the benefits behind each modeling solution.

Sections :

1. Attribute pattern
2. Extended reference pattern
3. Subset pattern
4. Computed pattern

#1# Attribute pattern :

#Problem :

Imagine you have many products, where each one has its own specifications , given the following two products :

product1 :
{
      "_id": ObjectId("5c5348f5be09bedd4f196f18"),
      "title": "",
      "date_acquisition": ISODate("2021-12-25T00:00:00.000Z"),
      "description": "",
      “brand” : “”,
      
      color :””,
      size:””,
      “container”:””,
      “sweetener”:””
}
product2 :
{
      "_id": ObjectId("5c5348f5be09bedd4f196f18"),
      "title": "",
      "date_acquisition": ISODate("2021-12-25T00:00:00.000Z"),
      "description": "",
      “brand” : “”,
      
      capacity:””,
      “input”:””,
      “output”:””
}

On the application , we want to have all products where :

• the capacity is lower than 3000 and the output equals to 5V
• or the color is red
• or the size is “100 x 70 x 50”

To make it faster , we should create an index on the color , size , capacity , and output ; more fields, more indexes, in this way a repetitive task may lead to a mess when scaling the database .

#Solution :

For this reason , the “attribute pattern” suggests grouping those fields in a single array of key-value pairs .

As an example Let’s apply this pattern on the product2 :

product2 :
{    
      "_id": ObjectId("5c5348f5be09bedd4f196f18"),
      "title": "",
      "date_acquisition": ISODate("2021-12-25T00:00:00.000Z"),
      "description": "",
      “brand” : “”,
      “specs” : [
      { “k” : “capacity” , “v”: “1000” },
      { “k” : “output” , “v”: “5V”},
      { “k” : “input” , “v” : “...” }
      ]
}

For now , the only indexes to create are on “specs.k” and “specs.v” .

#Common use cases :

• The Attribute Pattern is well suited for schemas with sets of fields having the same value type, such as lists of dates.
• It also works well when it comes to the characteristics of products (the above example). Some products, such as clothing, may have sizes that are expressed in small, medium, or large. Other products in the same collection may be expressed in volume etc..

#Conclusion :

The Attribute Pattern provides easier indexing and targeting many similar fields per document .

#2# Extended reference pattern :

#Problem :

Do you have nightmares about long and complex SQL queries performing too many joins ?

Even if you migrated from a 10 tables relational model in the tabular database to a 3 collections model in MongoDB, you might still find yourself doing a lot of queries that need to join data from different collections.

For sure, your MongoDB queries are nowhere going to be as complicated as in SQL.

In the world of big data anything you do too often can become a liability for your performance.

#Solution :

Now , time to introduce no physical joins pattern .

The idea behind this pattern is to embed a One-to-Many relationship on the one side or the Many-to-One on the many side .

To decide which collection should be inside the other you should consider the focus of your application when querying your database , if the focus is on the Many side , you must bring the one side to the Many .

Hint : you can extend only the part you need to join often .

Well , let’s take an example of an e-commerce application where we need to join the customers and their orders to get the shipping address .

Applying the extended reference pattern , we have to duplicate the following attributes inside the orders collection :

• country
• city
• postal code
• street
• House number

As a result, orders collection now will have an Order_location object with above fields :

#Common use cases :

• The extended reference pattern is used on real time applications where a single physical join matters .
• Used also on analytic and catalog applications .

#Conclusion :

Deciding to minimize joins and lookups on your application increases its performance especially when duplicated fields are not mutable .

Hint : if duplicated fields mutate you should handle updates and this pattern may not be the best fit .

#3# Subset pattern :

#Problem :

MongoDB tries to optimize the use of RAM by pulling in memory only the needed documents from the disk through the RAM.

When there is no more memory available, it evicts pages that contain the document it doesn't need anymore to make room for more needed documents to process at the moment.

This mechanism allows a hardware configuration that does less RAM than the total size of the data on disk.

As long as the size of your working set fits in RAM, you get good performance.

The working set refers to the amount of space taken by the documents and the portions of indexes that are frequently accessed.

Either if you get into a situation where the working set is larger than RAM, documents that are needed all the time, may not fit in memory , so the server finds itself often dropping documents and fetching back from disk .

This process of constantly ejecting documents that should stay in memory is bad , pretty bad.

#Solution :

To handle this problem you must either add more RAM , scale with sharding or reduce the size of your working set .

The last solution can be achieved by considering the subset pattern which focuses on splitting a collection in 2 collections : most and least used part of the document .

We can reduce the size of the working set while processing joins on the Many-to-Many or one-to-Many relationships by duplicating the often used attributes on the most used side (extended reference pattern)

A simple example can be the following document from a movies collection :

Most of the time users want to see the top actors and the top reviews, rather than all of them. The ideal solution is to keep only the most used fields and move others to a separate collection :

#Common use cases :

• List of reviews or comments on an article .
• List of actors in a movie .

#Conclusion :

As a result of applying the subset pattern, our working set will retrieve additional documents faster since they will be smaller , but the fact that you break documents in two and duplicate some info means that the database will require a little bit more space on disk.

However, this is not a big issue as this space is much cheaper than RAM.

#4# Computed pattern :

#Problem :

You may find yourself redoing the same mathematical , roll-up or fan-out operations which are all a kind of computations/transformations, if repeated can lead to a very poor performance.

On big data systems, doing the same computation over and over is very expensive and ends up using a lot of CPU .

#Solution :

The solution is to perform the computation and store the result in the appropriate document and collection. If you need to redo the computations or want to be able to redo them, just keep their sources .

As an example , we want to calculate the total of payments done on our store from the very beginning , if you think the $sum aggregation is enough for you , then you should consider this pattern to avoid computations each time a new payment is processed .

To handle this , we will add a new computation collection (for example : total_amount_payments ), once we have a new payment we should update the sum inside .

In this case the write operation is better than reading all documents over and over .

#Common use cases :

• Frequent aggregation framework queries .
• IOT ( Internet Of Things ).
• Event sourcing .

#Conclusion :

The computed pattern allows for a reduction in CPU workload when the data needs to be repeatedly computed by the application .

If you make it till the end , I hope you liked this introduction to the world of design patterns for MongoDB .

Still want to explore more ?

Here are some useful resources [ linked below :) ]

Resources :

Free MongoDB Official Courses | MongoDB University

Learn MongoDB directly from MongoDB University. Free online training courses and tutorials. Register today!

MongoDB Uni

Building with Patterns: A Summary | MongoDB Blog

A summary of all the patterns we’ve looked at in this series

Daniel CoupalMongoDB

Say that we have just met and I like you , how do I find out more about you ? And how do I let you know more about me ? This is the process of self-disclosure on both of our parts , we ask questions to know more about each other , we give our feedback , exchange ideas and situations , etc ... Each one reveals information about "self" to "other" , whereas , when we interact with others we might find out things we didn’t know about ourselves too , those new things never told to us before or we had never thought about .

Through analytical eyes , all of that information can be figured out using something called “JoHari Window” which is a tool for understanding and training self-awareness, personal development, interpersonal relationships, group dynamics, team development and inter-group relationships .

JoHari comes from Joseph and Harry, both american psychologists (Joseph Luft and Harry Ingham) who developed this model of communication in the 1950’s representing the level of self-disclosure and receptivity to feedback in one relationship ( may apply to teams ) .

JoHari Window can be also defined as a method of plotting disclosive behaviors in a relationship , this window contains 4 panes , areas or regions when each side is a figure of what is known and unknown .

Everyone has known and unknown things about “self” which can be represented by the following window :

And because JoHari cares also about other’s thoughts , it represents what the others know and ignore about me as “YOU KNOW” and “YOU DON’T KNOW” :

When we superimpose both representations what “I ” and “You” know or ignore , we end up with a window with 4 distinct window panes :

• Open area, open self, free area, free self, or 'the arena‘ : what is known by the person about him/herself and is also known by others .
• Blind area, blind self, or ' blindspot ' : what is unknown by the person about him/herself but which others know .
• Hidden area, hidden self, avoided area, avoided self or ' façade ' : what the person knows about him/herself that others do not know .
• Unknown area or unknown self : what is unknown by the person about him/herself and is also unknown by others .

How to increase Open Area to find more about yourself ?

Increasing Arena can be done through asking for and receiving feedback which decreases what the person doesn’t know about you and gives you the ability to explore more about the unknown part , by others' observation (which increases the blind area) , by self-discovery (which increases the hidden area) , or by mutual enlightenment via group experiences and discussion .

Criticism :

The main criticism of the JoHari Window is not a structural problem (what the model is) but a practical concern (how the model is used). The model explicitly invites the sharing of personal information which can be seen as a red flag by some persons , whatever their ideology is , thus may affect what others see about them and conduct to a misunderstanding .

On the other hand , sharing too much sensitive information might lead to a negative judgment , for example , someone might talk about a past failure to mention the learned values ; however, the description of the failure could potentially backfire and cause a loss of trust. The success of the JoHari Window exercise depends on the maturity of the receiver and the ability of the facilitator to match the level of trust to an appropriate quality of disclosure . Consideration must also be given to cultures and age , which will have different degrees of sensitivity to feedback.

In this tutorial you will be able to launch your online store in under an hour using the latest technologies : React.js , Strapi and SnipCart .

Here is the main sections of this tutorial :

Sections :

1. Build your Backend using Strapi
2. Create a React.js app to display products
3. Create a SnipCart account & integrate it in your React.js app

#1# Build your Backend using Strapi :

1. What is Strapi ?

Strapi is an open source Headless CMS that gives you the ability to create your models quickly and  generate the admin panel in a few clicks where you get your whole CMS setup in a few minutes.

Strapi offers you the possibility to fetch any data you might need via a REST API or GraphQL endpoint. That‘s Why Strapi !

1. Setup Strapi :

Using Strapi you have the possibility to use MySql , Postgresql , Sqlite or mongodb . In this tutorial I will setup Strapi with a postgresql database .

So let’s get started !

Strapi Documentation

The headless CMS developers love.

To install strapi make sure you meet these requirements :

Node.js : only LTS versions are supported (v12 and v14)

npm 6.x

1. create strapi project and choose postgresql

npx create-strapi-app my-project

At this stage , don’t panic , we are going to create our postgresql database , all what you have to do is to create a new heroku app + add a postgresql addon (start free ) :

Now you can go and get your database credentials

Then , go back to your terminal and add what you have got :

If you run into an issue , you can try creating a quickstart strapi project and then replace your database config file (config/database.js) with this :

module.exports = ({ env }) => ({
"defaultConnection": "default",
"connections": {
"default": {
"connector": "bookshelf",
"settings": {
"client": "postgres",
"host": "YOUR_HOST",
"port": "5432",
"database": "YOUR_DATABASE_NAME",
"username": "YOUR_USERNAME",
"password": "************************************",
"ssl": { "rejectUnauthorized": false }
},
"options":{
"pool":{
"min":0,
"max":20,
"idleTimeoutMillis":30000,
"createTimeoutMillis":30000,
"acquireTimeoutMillis":30000
}
}
}
}
}
);

additionally run this command to install postgresql package :

npm install pg --save

2 . Now , go to your admin dashboard :  localhost:1337/admin

3 . The next step is to create a content-type which is our product model , in this example I will define a product by : title , description , image , price and quantity .

4 . Then , go and add your products :

Everything is settled , the last thing we must do is to turn the product’s route permissions to public : ( count , find , findOne )

5 . Testing our API :

Congrats ! now time to create our react.js app .

#2# Create a React.js app to display products :

I will be using this project of AlexSegen :

https://github.com/AlexSegen/react-shopping-cart

You can create your own design , but if you are going to use the same project as mine , you have to modify some files , to simplify the job I will leave you my own version here .

[change the react_app_host environment variable to your strapi url ]

Otherwise , all you have to do is to fetch over your API .

1. Product context :

import React, { createContext, useState , useEffect } from 'react';

export const ProductsContext = createContext()

const ProductsContextProvider = ({children}) => {

const [hasError, setErrors] = useState(false);

const [products, setProducts] = useState(null);

const fetchData = async () => {

const res = await fetch(`${process.env.REACT_APP_HOST}/products`);
res
.json()
.then((res) =>{
setProducts(res)
console.log("success",res)
})
.catch((err) => setErrors("error :",err));

}

useEffect(() => {
fetchData();
}, []);

return (
<>
{ products && <ProductsContext.Provider value={{products}} >
{ children }
</ProductsContext.Provider>
}
</>
);
}

export default ProductsContextProvider;

2. Cart Item :

import React, { useContext } from 'react';
import { PlusCircleIcon, MinusCircleIcon, TrashIcon } from '../../components/icons'
import { CartContext } from '../../contexts/CartContext';

import { formatNumber } from '../../helpers/utils';

const CartItem = ({product}) => {

const { increase, decrease, removeProduct } = useContext(CartContext);

return (
<div className="row no-gutters py-2">
<div className="col-sm-2 p-2">
<img
alt={product.title}
src={`${process.env.REACT_APP_HOST}${product.image.url}`} className="img-fluid d-block"/>
</div>
<div className="col-sm-4 p-2">
<h5 className="mb-1">{product.name}</h5>
<p className="mb-1">Price: {formatNumber(product.price)} </p>

</div>
<div className="col-sm-2 p-2 text-center ">
<p className="mb-0">Qty: {product.Qte}</p>
</div>
<div className="col-sm-4 p-2 text-right">
<button
onClick={() => increase(product)}
className="btn btn-primary btn-sm mr-2 mb-1">
<PlusCircleIcon width={"20px"}/>
</button>

{
product.quantity > 1 &&
<button
onClick={() => decrease(product)}
className="btn btn-danger btn-sm mb-1">
<MinusCircleIcon width={"20px"}/>
</button>
}

{
product.quantity === 1 &&
<button
onClick={() => removeProduct(product)}
className="btn btn-danger btn-sm mb-1">
<TrashIcon width={"20px"}/>
</button>
}

</div>
</div>
);
}

export default CartItem;

3. Product item

import React, { useContext } from 'react';
import { Link } from 'react-router-dom';
import { CartContext } from '../../contexts/CartContext';
import { formatNumber } from '../../helpers/utils';

const ProductItem = ({product}) => {

const { addProduct, cartItems, increase } = useContext(CartContext);

const isInCart = product => {
return !!cartItems.find(item => item.id === product.id);
}

return (
<div className="card card-body">
<img style={{display: "block", margin: "0 auto 10px", maxHeight: "200px"}} className="img-fluid"
src={`${process.env.REACT_APP_HOST}${product.image.url}`} alt=""/>
<p>{product.title}</p>
<h3 className="text-left">{formatNumber(product.price)}</h3>
<div className="text-right">
<Link  to="/" className="btn btn-link btn-sm mr-2">Details</Link>

{
isInCart(product) &&
<button
onClick={() => increase(product)}
className="btn btn-outline-primary btn-sm">Add more</button>
}

{
!isInCart(product) &&
<button
onClick={() => addProduct(product)}
className="btn btn-primary btn-sm">Add to cart</button>
}

</div>
</div>
);
}

export default ProductItem;

4. Final View :

Here is the final view of the website :

The last step is adding the checkout configurations , but before , you must deploy the strapi project to heroku using the app created in section 1 .

#3# Create a SnipCart account & integrate it in your React.js app :

1.What is Snipcart ?

Snipcart is a third party shopping cart which can be integrated easily with any framework or CMS .

2.Why Snipcart ?

When you want to build a fast e-commerce solution to save time and focus on other features I highly recommend you to use snipcart , you can see  the main differences and compare it with other existing third parties in this link .

3.How to integrate Snipcart in this project ?

#Step 1 :

First you need to create a snipcart account and turn on the test mode .

#Step 2 (Optional) :

Let snipcart know your allowed domain name so it can be shown while sending invoices …

#Step 3 :

Check the features you need on snipcart :

#Step 4 :

We need to get our API key to add it on our index.html page , you can find it on API keys section as shown below :

After , add this lines into public/index.html in your react app :

<script async src="https://cdn.snipcart.com/themes/v3.0.22/default/snipcart.js"></script>
<div id="snipcart" data-api-key="YOUR_PUBLIC_KEY" hidden></div>

to use snipcart’s style :

<link rel="preconnect" href="https://app.snipcart.com">
<link rel="preconnect" href="https://cdn.snipcart.com">

<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="stylesheet" href="https://cdn.snipcart.com/themes/v3.0.22/default/snipcart.css" />

<link rel="stylesheet" href="https://cdn.snipcart.com/themes/v3.0.22/default/snipcart.css" />

#Step 5 :

Now back to our react components , all we need is to add snipcart-* classNames and some tags to our product item component so snipcart can process them :

import React, { useContext } from 'react';
import { Link } from 'react-router-dom';
import { CartContext } from '../../contexts/CartContext';
import { formatNumber } from '../../helpers/utils';

const ProductItem = ({product}) => {

const { addProduct, cartItems, increase } = useContext(CartContext);

const isInCart = product => {
return !!cartItems.find(item => item.id === product.id);
}

return (
<div className="card card-body">
<img style={{display: "block", margin: "0 auto 10px", maxHeight: "200px"}} className="img-fluid"
src={`${process.env.REACT_APP_HOST}${product.image.url}`} alt=""/>
<p>{product.title}</p>
<h3 className="text-left">{formatNumber(product.price)}</h3>
<div className="text-right">
<Link  to="/" className="btn btn-link btn-sm mr-2">Details</Link>

{
isInCart(product) &&
<button
onClick={() => increase(product)}
className="btn btn-outline-primary btn-sm">Add more</button>
}

{
!isInCart(product) &&
<button type="button"
className="snipcart-add-item btn btn-outline-danger btn-sm"
data-item-name={product.title}
data-item-price={product.price.toFixed(2)}
data-item-description={product.description}
data-item-min-quantity="0"
data-item-max-quantity={product.Qte}
data-item-id={product.id}
data-item-url="/">
Add to cart
</button>
}

</div>
</div>
);
}

export default ProductItem;

As you have seen , the changed lines are fewer than you might do when using other solutions .

• className="snipcart-add-item” => to add the current item to the shopping cart .
• data-item-price={product.price.toFixed(2)} => set the price .
• data-item-description={product.description} => set the description .
• data-item-min-quantity="0" => set the minimum quantity someone can select while decreasing the number of items (optional) .
• data-item-max-quantity={product.Qte} => the number of items we have on our store (optional) .
• data-item-id={product.id} => we must set the id of each product .
• data-item-url="/" => we must provide the url where the product is displayed .

#Step 6 :

Final step is to test our shopping cart using a test payment form before going to live mode :

If you made it till the end I want to tell you that you have done a great job and if you need any help or advice you can comment below or contact me . Hope you enjoyed this tutorial and find it helpful !

Live demo :

My Store

Web site created using create-react-app

Github repo :

ihssanehatim/ecommerce-reactjs

In this tutorial you will be able to launch your online store in under an hour using the latest technologies : React.js , Strapi and SnipCart . - ihssanehatim/ecommerce-reactjs

ihssanehatimGitHub

Painting is considered one of the most prestigious fine arts in the world be it from the 17 th century until modern time it gave us paintings like Leonardo Da Vinci's Mona Lisa and renowned figures like Picasso and so on. It involves expressing one’s inner thoughts and feelings, and it’s also a skill that anyone can learn with practice and training and thus become creative in it.

Painting and drawing have many benefits such as, improving creativity and imagination, improving memory, releasing stress, it also has a positive effect on the soul and helps to get rid of negative energy. You become more observant of the details, changing your perspective and the way you analyze things .

To start drawing, it is better to learn with the least means and tools, with focusing on skill development. For example, you begin by drawing simple shapes, outlines and silhouette, drawing things upside down, then learning the basics of shadow and light because it helps to form objects in a realistic way, and with this you will need to learn the coloring techniques ; dark areas with dark colors to determine the shade and light. And to discover colors, create a color wheel or color palette and learn color theory: combine colors and write the concentration of each color . This will help you in coloring and know the color tones to represent the shapes in a good way .

Here are some tips to improve your drawing skills:

• You must allocate time for training and drawing a lot to get impressive results. It is not important to draw for long hours, but it is good to draw 10 to 15 minutes every day to acquire a new skill.
• Read about art schools and drawing styles
• Visual feeding is one of the most important tools of the painter and designer to develop ideas through saturation with visual arts and their perception, analyzing them and then drawing inspiration for new ideas by watching and following the work of professional artists and those with great specialization in any field, inspiring some new ideas from their work, or similar ideas to them, but in a different way.

Finally, you should always stay motivated about what you are doing and if you don’t succeed at the first time or even twice try again !

That’s not the title of the movie that we are going to review, but rather the memorable ending line and the unsolved question  from the infamous movie ”Seven” .

Seven is a thriller movie that was released 1995 directed by David Fincher and stars Morgan Freeman, Kevin Spacey, Brad Pitt and Gwenth Paltrow, and if you aren’t familiar with “the divine comedy:Inferno” of Dante Alligiri before the movie, you will be after watching it.

While inferno “hell” to Dante is a dark hot place,hell to Fincher is a cloudy rainy unknown american city, where we first see ,soon to retire, detective William Somerset(Morgan Freeman), than we met his young, new to job partner, detective David Mills(Brad Pitt), William is old, wise fellow who have seen it all and wants a way out, while David is young, reckless and wants a way in this new city to him and his new office.

In their investigation of several murders, the two detectives discovered a pattern, that doesn’t only shows that they are dealing with a serial killer but a one whose murders are inspired by the seven deadly sins, meanwhile David’s wife Tracy forms a good friendship with William and trust him with decisions she can’t yet make especially that she hates the city that they are all living in now, by the end of the movie David, Tracy and William has completed the seven sins puzzle that John Doe(Kevin Spacey)has started.

Though the movie was just the second experience of David Fincher as a director, it was well perceived by both the audience and the crowd and got four awards out of nine nominations.

At some point and if you're a cat owner, you’ve already had a thought wondering about some facts that concern your pet  . We hope you can find the answer to one of your questions.

1.How long do cats live ?

The average lifespan of a cat depends on its environment , health conditions , maintenance and if the cat is spayed or neutered . for an indoor cat the average is 14 years meanwhile for outdoor cats it’s only 7-10 years .

2.Why do cats knead ?

When I first got my first cat , it was kneading every time it wanted to sleep or just lay down. Apparently, Kneading is a common behavior seen in cats, where the feline pushes in and out with its front paws or even all its paws, alternating between left and right.

This behavior is a leftover from the kitten hood , when the kitten will knead around the mother’s teat to promote the flow of milk .

3.Why do cats sleep so much?

Cats sleep 15 hours per day , which seems a lot for us . Cats are more active around twilight ( duck and down period ) because that is the perfect time for them to hunt as felines . hunting require energy as well as he can be the hunter or the prey , and this instinct is stays even if they’re domestic cats .

4.Why do cats have whiskers?

Whiskers are rougher and thicker than regular hair and have roots that are deeper .they are in fact more sensitive than regular hair , because the follicles from which they originate are jam packed with blood vessels and nerves. So these whiskers are the equivalent of fingers for human , so the cat can feel around it by its face .

Although whiskers are called “tactile hairs”,they don’t actually feel anything."

5.How long is a cat stays pregnant ?

Just like human cats have periods of peak fertility , which is called being in a season or the heat . cats pregnancy normally last between 58-67 days .

When I wanted to start my own blog , I was looking for a quick and fast solution to adopt , because my point was to publish and spread the information not to build a new from scratch website as a Web developer , and to make use of the existing microservices and APIs , suddenly I found out one world that changed my mindset about web programming : the "JAMSTACK" .

As a fan of new ideas I liked the way JAMSTACK works and to be more clear here are some of the reasons why I adopted JAMSTACK : (according to the official website and my own experience )

Let’s remove the backend !

When your website has a backend , it becomes slower because it needs to load your data from somewhere without forgetting the 5xx errors , this could also mean hours of debugging and the cost behind , when the JAMSTACK has another philosophy .

The philosophy is : instead of rendering the HTML on a backend on every request, you can build the HTML once and then serve it statically by :

1.Decoupling the frontend from the backend

Unlike the large legacy apps, Jamstack projects neatly separate the frontend pages and UI from the backend apps and databases. Freed from backend servers, the frontend can then be deployed globally, directly to a CDN.

2.Prebuilding all pages for speed

Before deployment, the entire front end is prebuilt into highly optimized static pages and assets. This happens in a build process (before being deployed / hosted).

3.Dynamic content via APIs

The global front end uses Javascript and APIs to talk to backend services, allowing pages to be enhanced and personalized.

To sum up ,with JAMSTACK the websites are Deployed globally , Webpages prerendered for speed , and the APIs & microservices take place to allow for more modular development where we can take advantage of the huge ecosystem of third party tools to provide website functionality.

If you want to explore more about JAMSTACK I highly recommend watching this JAMSTACK virtual conference (27 mai 2020) :