Open-Assistant: A Chat-based Assistant That Understands Tasks

Open-Assistant

OpenAssistant is a chat-based assistant that understands tasks, can interact with third-party systems, and retrieve information dynamically to do so.

What is Open Assistant?

Open Assistant is a project meant to give everyone access to a great chat based large language model.

We believe that by doing this we will create a revolution in innovation in language. In the same way that stable-diffusion helped the world make art and images in new ways we hope Open Assistant can help improve the world by improving language itself.

Do you want to try it out?

If you are interested in taking a look at the current state of the project, you can set up an entire stack needed to run Open-Assistant, including the website, backend, and associated dependent services.

To start the demo, run this in the root directory of the repository:

docker compose up --build

Then, navigate to http://localhost:3000 (It may take some time to boot up) and interact with the website.

Note: When logging in via email, navigate to http://localhost:1080 to get the magic email login link.

Note: If you would like to run this in a standardized development environment (a "devcontainer") using vscode locally or in a web browser using GitHub Codespaces, you can use the provided .devcontainer folder.

The Plan

We want to get to an initial MVP as fast as possible, by following the 3-steps outlined in the InstructGPT paper.

1. Collect high-quality human generated Instruction-Fulfillment samples (prompt + response), goal >50k. We design a crowdsourced process to collect and reviewed prompts. We do not want to train on flooding/toxic/spam/junk/personal information data. We will have a leaderboard to motivate the community that shows progress and the most active users. Swag will be given to the top-contributors.
2. For each of the collected prompts we will sample multiple completions. Completions of one prompt will then be shown randomly to users to rank them from best to worst. Again this should happen crowd-sourced, e.g. we need to deal with unreliable potentially malicious users. At least multiple votes by independent users have to be collected to measure the overall agreement. The gathered ranking-data will be used to train a reward model.
3. Now follows the RLHF training phase based on the prompts and the reward model.

We can then take the resulting model and continue with completion sampling step 2 for a next iteration.

The Vision

We are not going to stop at replicating ChatGPT. We want to build the assistant of the future, able to not only write email and cover letters, but do meaningful work, use APIs, dynamically research information, and much more, with the ability to be personalized and extended by anyone. And we want to do this in a way that is open and accessible, which means we must not only build a great assistant, but also make it small and efficient enough to run on consumer hardware.

Slide Decks

Vision & Roadmap

Important Data Structures

How can you help?

All open source projects begin with people like you. Open source is the belief that if we collaborate we can together gift our knowledge and technology to the world for the benefit of humanity.

Check out our contributing guide to get started.

Download Details:

Author: LAION-AI
Source Code: https://github.com/LAION-AI/Open-Assistant 
License: Apache-2.0 license

#python #machinelearning #ai #nextjs 

Photoshot: An Open-source AI Avatar Generator Web App

Photoshot

An open-source AI avatar generator web app

Try it out at photoshot.app

Stack

• ▲ Next.js for webapp
• 🖼 Chakra UI for UI components
• 📦 Prisma for database
• 🧠 Replicate, a platform for running machine learning models in the cloud
• 💰 Stripe for payments
• 👩‍🎨 Stable Diffusion an open-source text-to-image generation model

Getting Started

Install dependencies:

yarn install

You can use Docker to run a local postgres database and maildev server (accessible at http://localhost:1080):

docker-compose up -d

Create .env.local:

cp .env.example .env.local

Update environment variable values:

// Database connection string of your database (postgresql here)
DATABASE_URL=postgresql://photoshot:photoshot@localhost:5432/photoshot
// https://next-auth.js.org/configuration/options#nextauth_url
NEXTAUTH_URL=http://localhost:3000

// AWS S3 bucket info (for storing pictures)
S3_UPLOAD_KEY=
S3_UPLOAD_SECRET=
S3_UPLOAD_BUCKET=
S3_UPLOAD_REGION=

// Replicate API token / username
REPLICATE_API_TOKEN=
REPLICATE_USERNAME=
REPLICATE_MAX_TRAIN_STEPS=3000
REPLICATE_NEGATIVE_PROMPT=
REPLICATE_HD_VERSION_MODEL_ID=

// Replicate instance token (should be rare)
NEXT_PUBLIC_REPLICATE_INSTANCE_TOKEN=

// Random secret for NextAuth
SECRET=

// SMTP server and email address to send emails from
EMAIL_FROM=
EMAIL_SERVER=smtp://localhost:1080

// Stripe API key
STRIPE_SECRET_KEY=

// Price of a studio in cents (ie: 1000 = $10)
NEXT_PUBLIC_STRIPE_STUDIO_PRICE=

// Amount of allowed shots per studio
NEXT_PUBLIC_STUDIO_SHOT_AMOUNT=

// Prompt wizard
OPENAI_API_KEY=
OPENAI_API_SEED_PROMPT=

Run migrations

yarn prisma:migrate:dev

Run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

Download Details:

Author: hinework
Source Code: https://github.com/shinework/photoshot 
License: MIT license

#typescript #ai #reactjs #nextjs 

Precedent: an Opinionated Collection Of Components, Hooks, Utilities

Precedent

Building blocks for your Next project

Introduction

Precedent is an opinionated collection of components, hooks, and utilities for your Next.js project.

One-click Deploy

You can deploy this template to Vercel with the button below:

You can also clone & create this repo locally with the following command:

npx create-next-app precedent --example "https://github.com/steven-tey/precedent"

Tech Stack + Features

https://user-images.githubusercontent.com/28986134/212368288-12f41e37-aa8c-4e0a-a542-cf6d23410a65.mp4

Frameworks

• Next.js – React framework for building performant apps with the best developer experience
• Auth.js – Handle user authentication with ease with providers like Google, Twitter, GitHub, etc.
• Prisma – Typescript-first ORM for Node.js

Platforms

• Vercel – Easily preview & deploy changes with git
• Railway – Easily provision a PostgreSQL database (no login required)

UI

• Tailwind CSS – Utility-first CSS framework for rapid UI development
• Radix – Primitives like modal, popover, etc. to build a stellar user experience
• Framer Motion – Motion library for React to animate components with ease
• Lucide – Beautifully simple, pixel-perfect icons
• @next/font – Optimize custom fonts and remove external network requests for improved performance
• @vercel/og – Generate dynamic Open Graph images on the edge
• react-wrap-balancer – Simple React component that makes titles more readable

Hooks and Utilities

• useIntersectionObserver –  React hook to observe when an element enters or leaves the viewport
• useLocalStorage – Persist data in the browser's local storage
• useScroll – React hook to observe scroll position (example)
• nFormatter – Format numbers with suffixes like 1.2k or 1.2M
• capitalize – Capitalize the first letter of a string
• truncate – Truncate a string to a specified length
• use-debounce – Debounce a function call / state update

Code Quality

• TypeScript – Static type checker for end-to-end typesafety
• Prettier – Opinionated code formatter for consistent code style
• ESLint – Pluggable linter for Next.js and TypeScript

Miscellaneous

• Vercel Analytics – Track unique visitors, pageviews, and more in a privacy-friendly way

Download Details:

Author: Steven-tey
Source Code: https://github.com/steven-tey/precedent 
License: MIT license

#typescript #eslint #nextjs #tailwindcss 

OpenAssistant: A Chat-based Assistant That Understands Tasks

Open-Assistant 

OpenAssistant is a chat-based assistant that understands tasks, can interact with third-party systems, and retrieve information dynamically to do so.

What is Open Assistant?

Open Assistant is a project meant to give everyone access to a great chat based large language model.

We believe that by doing this we will create a revolution in innovation in language. In the same way that stable-diffusion helped the world make art and images in new ways we hope Open Assistant can help improve the world by improving language itself.

Do you want to try it out?

If you are interested in taking a look at the current state of the project, you can set up an entire stack needed to run Open-Assistant, including the website, backend, and associated dependent services.

To start the demo, run this in the root directory of the repository:

docker compose up --build

Then, navigate to http://localhost:3000 (It may take some time to boot up) and interact with the website.

Note: When logging in via email, navigate to http://localhost:1080 to get the magic email login link.

Note: If you would like to run this in a standardized development environment (a "devcontainer") using vscode locally or in a web browser using GitHub Codespaces, you can use the provided .devcontainer folder.

The Plan

We want to get to an initial MVP as fast as possible, by following the 3-steps outlined in the InstructGPT paper.

1. Collect high-quality human generated Instruction-Fulfillment samples (prompt + response), goal >50k. We design a crowdsourced process to collect and reviewed prompts. We do not want to train on flooding/toxic/spam/junk/personal information data. We will have a leaderboard to motivate the community that shows progress and the most active users. Swag will be given to the top-contributors.
2. For each of the collected prompts we will sample multiple completions. Completions of one prompt will then be shown randomly to users to rank them from best to worst. Again this should happen crowd-sourced, e.g. we need to deal with unreliable potentially malicious users. At least multiple votes by independent users have to be collected to measure the overall agreement. The gathered ranking-data will be used to train a reward model.
3. Now follows the RLHF training phase based on the prompts and the reward model.

We can then take the resulting model and continue with completion sampling step 2 for a next iteration.

The Vision

We are not going to stop at replicating ChatGPT. We want to build the assistant of the future, able to not only write email and cover letters, but do meaningful work, use APIs, dynamically research information, and much more, with the ability to be personalized and extended by anyone. And we want to do this in a way that is open and accessible, which means we must not only build a great assistant, but also make it small and efficient enough to run on consumer hardware.

Slide Decks

Vision & Roadmap

Important Data Structures

How can you help?

All open source projects begin with people like you. Open source is the belief that if we collaborate we can together gift our knowledge and technology to the world for the benefit of humanity.

Check out our contributing guide to get started.

Download Details:

Author: LAION-AI
Source Code: https://github.com/LAION-AI/Open-Assistant 
License: Apache-2.0 license

#python #machinelearning #ai #nextjs #discord #bot 

Cal.com: Scheduling infrastructure for Absolutely Everyone

Cal.com (formerly Calendso)

The open-source Calendly alternative.

About The Project

Scheduling infrastructure for absolutely everyone

The open source Calendly alternative. You are in charge of your own data, workflow and appearance.

Calendly and other scheduling tools are awesome. It made our lives massively easier. We're using it for business meetings, seminars, yoga classes and even calls with our families. However, most tools are very limited in terms of control and customisations.

That's where Cal.com comes in. Self-hosted or hosted by us. White-label by design. API-driven and ready to be deployed on your own domain. Full control of your events and data.

Recognition

Hacker News

Product Hunt

Built With

• Next.js
• React
• Tailwind
• Prisma

Stay Up-to-Date

Cal officially launched as v.1.0 on 15th of September, however a lot of new features are coming. Watch releases of this repository to be notified for future updates:

Getting Started

To get a local copy up and running, please follow these simple steps.

Prerequisites

Here is what you need to be able to run Cal.

• Node.js (Version: >=15.x <17)
• PostgreSQL
• Yarn (recommended)

If you want to enable any of the available integrations, you may want to obtain additional credentials for each one. More details on this can be found below under the integrations section.

Development

Setup

Clone the repo into a public GitHub repository (or fork https://github.com/calcom/cal.com/fork). If you plan to distribute the code, keep the source code public to comply with AGPLv3. To clone in a private repository, acquire a commercial license)

git clone https://github.com/calcom/cal.com.git

Go to the project folder

cd cal.com

Install packages with yarn

yarn

Set up your .env file

• Duplicate .env.example to .env
• Use openssl rand -base64 32 to generate a key and add it under NEXTAUTH_SECRET in the .env file.
• Use openssl rand -base64 24 to generate a key and add it under CALENDSO_ENCRYPTION_KEY in the .env file.

Quick start with yarn dx

• Requires Docker and Docker Compose to be installed
• Will start a local Postgres instance with a few test users - the credentials will be logged in the console

yarn dx

Development tip

Add NEXT_PUBLIC_DEBUG=1 anywhere in your .env to get logging information for all the queries and mutations driven by trpc.

echo 'NEXT_PUBLIC_DEBUG=1' >> .env

Manual setup

Configure environment variables in the .env file. Replace <user>, <pass>, <db-host>, <db-port> with their applicable values

DATABASE_URL='postgresql://<user>:<pass>@<db-host>:<db-port>'

1. If you don't know how to configure the DATABASE_URL, then follow the steps here to create a quick DB using Heroku

Set a 32 character random string in your .env file for the CALENDSO_ENCRYPTION_KEY (You can use a command like openssl rand -base64 24 to generate one).

Set up the database using the Prisma schema (found in packages/prisma/schema.prisma)

yarn workspace @calcom/prisma db-deploy

Run (in development mode)

yarn dev

Setting up your first user

Open Prisma Studio to look at or modify the database content:

yarn db-studio

Click on the User model to add a new user record.

Fill out the fields email, username, password, and set metadata to empty {} (remembering to encrypt your password with BCrypt) and click Save 1 Record to create your first user.

New users are set on a TRIAL plan by default. You might want to adjust this behavior to your needs in the packages/prisma/schema.prisma file.

Open a browser to http://localhost:3000 and login with your just created, first user.

E2E-Testing

Be sure to set the environment variable NEXTAUTH_URL to the correct value. If you are running locally, as the documentation within .env.example mentions, the value should be http://localhost:3000.

# In a terminal just run:
yarn test-e2e

# To open last HTML report run:
yarn playwright show-report test-results/reports/playwright-html-report

Upgrading from earlier versions

Pull the current version:

git pull

Check if dependencies got added/updated/removed

yarn

Apply database migrations by running one of the following commands:

In a development environment, run:

yarn workspace @calcom/prisma db-migrate

(this can clear your development database in some cases)

In a production environment, run:

yarn workspace @calcom/prisma db-deploy

Check for .env variables changes

yarn predev

Start the server. In a development environment, just do:

yarn dev

For a production build, run for example:

yarn build
yarn start

Enjoy the new version.

Deployment

Docker

The Docker configuration for Cal is an effort powered by people within the community.

If you want to contribute to the Docker repository, reply here.

The Docker configuration can be found in our docker repository.

Issues with Docker? Find your answer or open a new discussion here to ask the community.

Cal.com, Inc. does not provide official support for Docker, but we will accept fixes and documentation. Use at your own risk.

Heroku

Railway

You can deploy Cal on Railway using the button above. The team at Railway also have a detailed blog post on deploying Cal on their platform.

Vercel

Currently Vercel Pro Plan is required to be able to Deploy this application with Vercel, due to limitations on the number of serverless functions on the free plan.

Render

Roadmap

See the roadmap project for a list of proposed features (and known issues). You can change the view to see planned tagged releases.

Repo Activity

Contributing

Please see our contributing guide.

Good First Issues

We have a list of help wanted that contain small features and bugs which have a relatively limited scope. This is a great place to get started, gain experience, and get familiar with our contribution process.

Translations

Don't code but still want to contribute? Join our slack and join the #i18n channel and let us know what language you want to translate.

Integrations

Obtaining the Google API Credentials

1. Open Google API Console. If you don't have a project in your Google Cloud subscription, you'll need to create one before proceeding further. Under Dashboard pane, select Enable APIS and Services.
2. In the search box, type calendar and select the Google Calendar API search result.
3. Enable the selected API.
4. Next, go to the OAuth consent screen from the side pane. Select the app type (Internal or External) and enter the basic app details on the first page.
5. In the second page on Scopes, select Add or Remove Scopes. Search for Calendar.event and select the scope with scope value .../auth/calendar.events, .../auth/calendar.readonly and select Update.
6. In the third page (Test Users), add the Google account(s) you'll using. Make sure the details are correct on the last page of the wizard and your consent screen will be configured.
7. Now select Credentials from the side pane and then select Create Credentials. Select the OAuth Client ID option.
8. Select Web Application as the Application Type.
9. Under Authorized redirect URI's, select Add URI and then add the URI <Cal.com URL>/api/integrations/googlecalendar/callback and <Cal.com URL>/api/auth/callback/google replacing Cal.com URL with the URI at which your application runs.
10. The key will be created and you will be redirected back to the Credentials page. Select the newly generated client ID under OAuth 2.0 Client IDs.
11. Select Download JSON. Copy the contents of this file and paste the entire JSON string in the .env file as the value for GOOGLE_API_CREDENTIALS key.

Adding google calendar to Cal.com App Store

After adding Google credentials, you can now Google Calendar App to the app store. You can repopulate the App store by running

cd packages/prisma
yarn seed-app-store

You will need to complete a few more steps to activate Google Calendar App. Make sure to complete section "Obtaining the Google API Credentials". After the do the following

1. Add extra redirect URL <Cal.com URL>/api/auth/callback/google
2. Under 'OAuth concent screen', click "PUBLISH APP"

Obtaining Microsoft Graph Client ID and Secret

1. Open Azure App Registration and select New registration
2. Name your application
3. Set Who can use this application or access this API? to Accounts in any organizational directory (Any Azure AD directory - Multitenant)
4. Set the Web redirect URI to <Cal.com URL>/api/integrations/office365calendar/callback replacing Cal.com URL with the URI at which your application runs.
5. Use Application (client) ID as the MS_GRAPH_CLIENT_ID attribute value in .env
6. Click Certificates & secrets create a new client secret and use the value as the MS_GRAPH_CLIENT_SECRET attribute

Obtaining Zoom Client ID and Secret

1. Open Zoom Marketplace and sign in with your Zoom account.
2. On the upper right, click "Develop" => "Build App".
3. On "OAuth", select "Create".
4. Name your App.
5. Choose "User-managed app" as the app type.
6. De-select the option to publish the app on the Zoom App Marketplace.
7. Click "Create".
8. Now copy the Client ID and Client Secret to your .env file into the ZOOM_CLIENT_ID and ZOOM_CLIENT_SECRET fields.
9. Set the Redirect URL for OAuth <Cal.com URL>/api/integrations/zoomvideo/callback replacing Cal.com URL with the URI at which your application runs.
10. Also add the redirect URL given above as a allow list URL and enable "Subdomain check". Make sure, it says "saved" below the form.
11. You don't need to provide basic information about your app. Instead click at "Scopes" and then at "+ Add Scopes". On the left, click the category "Meeting" and check the scope meeting:write.
12. Click "Done".
13. You're good to go. Now you can easily add your Zoom integration in the Cal.com settings.

Obtaining Daily API Credentials

1. Open Daily and sign into your account.
2. From within your dashboard, go to the developers tab.
3. Copy your API key.
4. Now paste the API key to your .env file into the DAILY_API_KEY field in your .env file.
5. If you have the Daily Scale Plan set the DAILY_SCALE_PLAN variable to true in order to use features like video recording.

Obtaining HubSpot Client ID and Secret

1. Open HubSpot Developer and sign into your account, or create a new one.
2. From within the home of the Developer account page, go to "Manage apps".
3. Click "Create app" button top right.
4. Fill in any information you want in the "App info" tab
5. Go to tab "Auth"
6. Now copy the Client ID and Client Secret to your .env file into the HUBSPOT_CLIENT_ID and HUBSPOT_CLIENT_SECRET fields.
7. Set the Redirect URL for OAuth <Cal.com URL>/api/integrations/hubspot/callback replacing Cal.com URL with the URI at which your application runs.
8. In the "Scopes" section at the bottom of the page, make sure you select "Read" and "Write" for scope called crm.objects.contacts
9. Click the "Save" button at the bottom footer.
10. You're good to go. Now you can see any booking in Cal.com created as a meeting in HubSpot for your contacts.

Workflows

Setting up SendGrid for Email reminders

1. Create a SendGrid account (https://signup.sendgrid.com/)
2. Go to Settings -> API keys and create an API key
3. Copy API key to your .env file into the SENDGRID_API_KEY field
4. Go to Settings -> Sender Authentication and verify a single sender
5. Copy the verified E-Mail to your .env file into the SENDGRID_EMAIL field
6. Add your custom sender name to the .env file into the NEXT_PUBLIC_SENDGRID_SENDER_NAME field (fallback is Cal.com)

Setting up Twilio for SMS reminders

1. Create a Twilio account (https://www.twilio.com/try-twilio)
2. Click ‘Get a Twilio phone number’
3. Copy Account SID to your .env file into the TWILIO_SID field
4. Copy Auth Token to your .env file into the TWILIO_TOKEN field
5. Copy your Twilio phone number to your .env file into the TWILIO_PHONE_NUMBER field
6. Add your own sender id to the .env file into the NEXT_PUBLIC_SENDER_ID field (fallback is Cal)
7. Create a messaging service (Develop -> Messaging -> Services)
8. Choose any name for the messaging service
9. Click 'Add Senders'
10. Choose phone number as sender type
11. Add the listed phone number
12. Leave all other fields as they are
13. Complete setup and click ‘View my new Messaging Service’
14. Copy Messaging Service SID to your .env file into the TWILIO_MESSAGING_SID field
15. Create a verify service
16. Copy Verify Service SID to your .env file into the TWILIO_VERIFY_SID field

Acknowledgements

Special thanks to these amazing projects which help power Cal.com:

• Vercel
• Next.js
• Day.js
• Tailwind CSS
• Prisma

Cal.com is an open startup and Jitsu (an open-source Segment alternative) helps us to track most of the usage metrics.

Download Details:

Author: Calcom
Source Code: https://github.com/calcom/cal.com 
License: View license

#opensource #typescript #nextjs #postgresql #prisma #tailwindcss

Build a Simple Blog Application with Contentful and Next.js

Learn how to build a simple blog application using Contentful and Nextjs. Learn how to use Contentful CMS with Next.js. See how Contentful can be easily integrated into your Next.js app, enabling you to access and display content flexibly and dynamically. 

Contentful is a headless CMS, allowing users to manage and deliver their content through APIs rather than building and maintaining a traditional website or application. This makes it easy to integrate Contentful with various frontend frameworks and tools, including Next.js.

Next.js provides several features that can make it easier to work with Contentful. For example, Next.js offers automatic code splitting, which can help improve the performance of your application by only loading the content needed for each page. Next.js also has inbuilt server-side rendering support, making it easier to deliver your content to a wide range of devices and browsers.

In the article, we’ll walk through how to build a simple blog application using Contentful and Next.js.

Table of contents:

• What is Contentful CMS?
• How do you use Contentful?
• Building an app with Contentful and Next.js
  • Creating the Next.js project
  • Creating the content model
  • Retrieving and displaying content
• Alternatives to Contentful CMS

What is Contentful CMS?

Contentful is a content management system that allows users to manage and store content in a structured way. It is often used to build websites and applications.

Contentful’s primary selling point is its ability to enable users to create and manage content easily without requiring technical expertise. With this CMS, users can create, edit, and manage content using a simple and intuitive web-based interface. They can then deliver that content to any platform or device using APIs. This makes it a popular choice for organizations that must manage and provide a lot of content across multiple channels.

A key feature of Contentful is its flexibility, allowing for significant user customization. With its powerful APIs and webhooks, users can easily integrate Contentful with other systems and tools, such as ecommerce platforms, analytics tools, and more.

Contentful also offers many inbuilt features to help users manage their content effectively. These include the ability to create custom content models, collaborate with team members, and preview content changes before publishing.

How do you use Contentful?

Before using Contentful, you must create an account and set up your first space. Space is a container where you can store, manage, and deliver your content.

Getting started with Contentful is relatively straightforward and can be done through their user-friendly web interface; follow these steps:

1. Set up an account: Go to the Contentful website and sign up for an account
2. Create a space: After you have signed up, click on Spaces > Add space in the side menu and then click the Create a space button. Next, give your space a name, select the appropriate environment (e.g., Production or Staging), and then click the Create button
3. Add content: Click on Content in the top menu. From there, you can create content models, which define the structure of your content, and then start adding entries
4. Deliver content: You can use the Contentful APIs or one of the many available SDKs (such as the JavaScript SDK) to retrieve your content and display it in your application or website

Building an app with Contentful and Next.js

Contentful comes with a wide range of features and tools that can be useful when building a Next.js application. For example, it includes support for content modeling, media management, versioning, and localization, which can help you create more advanced and sophisticated applications.

To use Contentful with Next.js, you must create a Contentful account and set up your content models. Then, you can use the Contentful APIs to retrieve your content and display it in your Next.js application.

Let’s create a simple blog app to demonstrate the usage of Contentful CMS with Next.js.

Creating the Next.js project

As a first step, you’ll need to create a new Next.js project and install the necessary dependencies. To do this, use the following commands:

> npx create-next-app my-blog-app
> cd my-blog-app
> npm install contentful

Creating the content model

Next, you’ll need to set up your Contentful space and create a content model for your blog posts. To do this, we’ll follow the steps discussed previously.

First, go to the Contentful website and sign up for an account.

Next, click on Spaces > Add space in the side menu and then click the Create a space button:

Now, give your space a name (we’ll use ”NextExample”), select the appropriate environment (for this demo, we’ll select “master”), and then click on the Create button.

Next, click on Content model in the top menu and click the Design your content model button:

To create your first piece of content, click the Create a content type button.:

Next, give your content model a name (for this demo, we’ll use “Blog Post”), click the Create button, and then add the fields that you want to include in your content model (e.g., “title,” “body,” and “author”):

Now you can create entries using this model to populate your space with content.

Retrieving and displaying content

Once you’ve set up your Contentful space and created some content, you can use the Contentful JavaScript SDK to retrieve and display your content in your Next.js app.

In your Next.js project, create a utils.js file and add the following code:

// src/utils.js
import { createClient } from 'contentful';

const client = createClient({
  space: 'YOUR_SPACE_ID',
  accessToken: 'YOUR_ACCESS_TOKEN',
});

// Retrieve the list of blog posts from Contentful
const getBlogPosts = async () => {
  const response = await client.getEntries({
    content_type: 'blogPost',
  });

  return response.items;
};

export default getBlogPosts;

This code uses the Contentful JavaScript SDK to create a client instance and retrieves a list of blog post entries from your Contentful space.

You can then use the getBlogPosts() function to display your blog posts in your Next.js app. For example, you could add the following code to the index.js file in your pages directory to display a list of your blog posts on your app’s homepage:

import styles from "../styles/Home.module.css";
import getBlogPosts from "../src/utils";

export default function Home({ posts }) {
  return (
    <div className={styles.main}>
      <ul className={styles.blogPosts}>
        {posts.map((post) => (
          <li key={post.sys.id}>
            <h2>{post.fields.title}</h2>
            <p>~ by {post.fields.authorName}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

Home.getInitialProps = async () => {
  const posts = await getBlogPosts();

  return { posts };
};

The createClient() function requires the space ID and your access token from the Contentful dashboard.

To get the space ID, navigate to Settings > General settings:

To copy the space ID, click on the copy icon:

To get your access token, navigate to Settings > API keys:

Next, click the Add API key button to generate a new token:

In the next screen, copy the access token from the Content Delivery API – access token field:

You can view the the complete code for this example on GitHub; check out the final results below:

Alternatives to Contentful CMS

There are several alternatives to Contentful that you might consider, depending on your specific needs and requirements. Some popular options include:

• Sanity is a headless CMS that offers a real-time, collaborative editing environment and a robust set of APIs
• Strapi is an open source headless CMS that offers a user-friendly interface and a wide range of customizable features
• Kontent.ai is a cloud-based headless CMS that offers advanced features for managing and delivering content across different channels and devices
• DatoCMS is a headless CMS that allows developers to create and manage content for their websites and applications. It is a popular choice for eCommerce websites because it provides a flexible and scalable way to build and manage online stores
• Payload is a headless CMS and application framework. It is designed to provide a robust backend for managing and storing content while staying out of the way as applications become more complex

Each of these alternatives has unique features and capabilities, so it’s worth considering them carefully to determine which is best for your project.

Conclusion

Using a CMS like Contentful can improve the performance of your Next.js application because it allows you to store and deliver content separately from your application code. This can make your application faster and more scalable, especially if you have a lot of content or traffic.

With Contentful, you can deliver your content to any platform or device using APIs. Contentful can be integrated into your Next.js web application with just a few lines of code, enabling you to access and display your content flexibly and dynamically.

Original article source at https://blog.logrocket.com

#nextjs 

How to Build Full Stack Apps with Next.js 13

Learn how to build full stack Apps with Next.js 13. This tutorial give you a full rundown of the main features included in Next 13 to get you up and going.

Next.js 13 Crash Course | Learn How To Build Full Stack Apps!

In today's episode we are going to start off a series where we are going to build loads of stuff with Next.js. I am going to give you a full rundown of the main features included in Next 13 to get you up and going.
After we get familiar with Next13, we will cover Typescript, Postgresql and Prisma to create a full stack app in the future.

#nextjs #react 

Reddit Clone with React, Firebase, Next.js, Chakra UI and TypeScript

Learn to build a Reddit clone from scratch using React, Firebase, Next.js, Chakra UI, and TypeScript. The application features authentication, Firestore database, cloud functions, security rules, Transactions, deployment, and more.

Code a Reddit Clone with React, Next.js, Firebase v9, Chakra UI – Full Course

⭐️ Contents ⭐️
⌨️ (0:00:00) Intro & Project Demo
⌨️ (0:08:25) Begin Project (Preface, Create Next App, Next.js fundamental concepts: pages and client-side routing)
⌨️ (0:11:26) Core package installations (Chakra-React, Firebase, Recoil) and & ChakraProvider setup & Quick Note on React 18 (w/ Chakra)
⌨️ (0:14:12) Create Chakra Theme (theme setup & explanation and global styling)
⌨️ (0:19:28) React TypeScript Intro & Next.js Layout Component
⌨️ (0:22:40) Begin Navbar (Navbar in Layout Component, component folder structure debrief)
⌨️ (0:24:30) Navbar Logos & Chakra UI Styling Fundamentals (flexbox, component styling, responsive design w/ media queries)
⌨️ (0:29:56) SearchInput Component
⌨️ (0:36:37) Authentication buttons & Chakra UI global component styling explanation
⌨️ (0:44:59) Authentication Modal Intro (Chakra UI modal skeleton)
⌨️ (0:47:23) Recoil Setup & Intro, Recoil Atoms with TypeScript, Auth Modal w/ global Recoil State
⌨️ (0:57:44) Authentication Modal Content (Login & Sign Up forms, React form state, React events w/ TypeScript)
⌨️ (1:18:57) OAuth Buttons (Sign In w/ Google, Facebook, Github, etc.)
⌨️ (1:23:49) Firebase Setup (Create new Firebase Project, Client SDK’s)
⌨️ (1:30:31) User Creation (react-firebase-hooks, useCreateUser firebase hook)
⌨️ (1:40:22) Firebase Error Handling (TypeScript indexing, custom error messages)
⌨️ (1:46:13) Google Authentication (useSignInWithGoogle hook)
⌨️ (1:51:28) Sign in Existing users (useSignInWithEmailAnPassword firebase hook)
⌨️ (1:56:45) useAuthState firebase hook (currently signed-in user, modify navbar UI for authenticated user)
⌨️ (2:03:54) Reset Passwords (useSendPasswordResetEmail firebase hook)
⌨️ (2:09:04) Navbar Icons (react-icons)
⌨️ (2:16:47) User Dropdown Menu (Chakra Menu component)
⌨️ (2:26:54) User Karma (custom user properties)
⌨️ (2:28:55) Community Directory in Navbar (create community intro)
⌨️ (2:38:09) Create Community Modal 1: Skeleton
⌨️ (2:44:34) Create Community Modal 2: Body (input, character count, community type list)
⌨️ (3:01:20) Create Communities & Cloud Firestore Database
⌨️ (3:17:37) Joining Communities 1 (User communities, SQL vs. NoSQL Data Modelling)
⌨️ (3:27:31) Cloud Functions (firebase-admin, Authentication, Adding Custom User Properties)
⌨️ (3:38:43) Cloud Functions Alternative for Custom User Properties, optional
⌨️ (3:43:46) Joining Communities 2 (Firestore Transactions and Sub-Collections)
⌨️ (3:50:12) Community Page (Server-side Rendering w/ NextJS, data fetching w/ getServerSideProps)
⌨️ (4:01:44) Community Not Found component
⌨️ (4:04:36) Community Page Header component
⌨️ (4:14:30) Custom PageContent Layout component (React children)
⌨️ (4:25:20) Community Data Recoil Atom (global communities state)
⌨️ (4:30:29) useCommunityData Custom Hook (Creating Custom Hooks in React)
⌨️ (4:39:35) Fetch User Community Snippets (getMyCommunities function)
⌨️ (4:50:59) Join & Leave Communities (Firestore Database Batched Writes)
⌨️ (5:04:26) Create Post Page & CreatePostLink Component
⌨️ (5:08:17) NewPostForm 1: FormTabsComponent (Multi-step React forms)
⌨️ (5:20:36) NewPostForm 2: PostTextInputs (Post Title & Body)
⌨️ (5:31:50) NewPostForm 3: ImageUpload Component
⌨️ (5:49:13) handleCreatePost Function (Save Posts to Firestore, Upload Image to Firebase Storage)
⌨️ (6:07:45) Fetch All Posts in Community (usePosts custom hook, Firestore queries)
⌨️ (6:17:56) PostItem Component
⌨️ (6:38:07) PostLoader Component (Chakra UI Skeletons)
⌨️ (6:43:17) Deleting Posts (handleDelete function, TypeScript promises)
⌨️ (6:54:23) About Community Component (currentCommunity recoil state)
⌨️ (7:10:19) Customize Community Image (useSelectFile custom react hook, Admin/Moderator permissions)
⌨️ (7:30:24) Voting on Posts (user postVotes collection batched writes)
⌨️ (8:11:30) Single Post Page (Next.js Dynamic [pid] route, event propagation)
⌨️ (8:29:25) Single Post Link Sharing (refresh dilemma, fetchPost fallback function)
⌨️ (8:35:09) Community Data Refresh Dilemma (getCommunityData fallback function)
⌨️ (8:43:49) Commenting on Posts (comment collection data modelling)
⌨️ (9:08:46) CommentItem Component
⌨️ (9:29:41) Deleting Comments
⌨️ (9:37:25) Community Navigation Dropdown (communityDirectory recoil atom)
⌨️ (9:55:31) useDirectory custom react hook
⌨️ (10:14:15) Home Page (Governing logic)
⌨️ (10:21:48) Home Feed for Logged-Out Users
⌨️ (10:38:11) Home Feed for Logged-In Users
⌨️ (10:54:20) Post Votes for Feed Posts
⌨️ (11:00:01) Top Communities Component (and supporting components)
⌨️ (11:20:34) Deployment with Vercel
⌨️ (11:32:06) Firebase Security Rules
⌨️ (11:41:48) Project Completion & Outro

💻 Code: https://github.com/shadeemerhi/reddit-clone-yt

#react #firebase #nextjs #chakra #typescript

UI: Beautifully Designed Components Built with Radix UI & Tailwind CSS

Shadcn/ui

Beautifully designed components built with Radix UI and Tailwind CSS.

Roadmap

Warning This is work in progress. I'm building this in public. You can follow the progress on Twitter @shadcn.

•  Toast
•  Toggle
•  Toggle Group
•  Toolbar
•  Navigation Menu
•  Figma?

Get Started

Starting a new project? Check out the Next.js template.

npx create-next-app -e https://github.com/shadcn/next-template

Features

• Radix UI Primitives
• Tailwind CSS
• Fonts with @next/font
• Icons from Lucide
• Dark mode with next-themes
• Automatic import sorting with @ianvs/prettier-plugin-sort-imports

Tailwind CSS Features

• Class merging with tailwind-merge
• Animation with tailwindcss-animate
• Conditional classes with clsx
• Variants with class-variance-authority
• Automatic class sorting with eslint-plugin-tailwindcss

Download Details:

Author: Shadcn
Source Code: https://github.com/shadcn/ui 

#react #components #ui #nextjs #tailwindcss #radix 

Audiophile Ecommerce Website Built with NextJS

Frontend Mentor - Audiphole Ecommerce Website Solution

This is a solution to the Audiophile Ecommerce challenge on Frontend Mentor.

Overview

Screenshot

My Process

Built with

• NextJS (React Framework for SSR)
• TailwindCSS (Utility-first CSS framework)
• Firestore Database (NOSQL firebase dataabse)
• Cloudinary (for image storage)

What I learned

• NextJS and the power of server-side rendering (SSR). I learned about NextJS Dynamic Routing and used it to build product pages under certain cagetories. For example: /pages/headphones/[slug].js
• getStaticPaths inside the [slug].js files queries firebase database to find list of products and statically pre-renders the dynamic routes based on the products available. Because data is available during build time, I used getStaticProps to generate the dynamic pages based on paths. This function runs only on server side.
• I wanted to experiment with quering from multiple sources of data. Thats why all the images are stored in Cloudinary and product data comes from Firebase. I have used NextJS next/image Image Optimizations for faster page loading.
• It was very fun building the website with TailwindCSS with mobile-first approach. There are so many images and the structure of the page change drastically depending on device screen space. I have used resized images for tablet/mobile/desktop sizes, combined with next/image optimizations to make laoding time faster.
• NextJS provides so much more features and I would love to make more projects with this framework.

Features left to implement

• Cart to add products
• Checkout page

Download details:

Author: GStormx2
Source code: https://github.com/GStormx2/audiophile-ecommerce

#react #react-native #nextjs 

Next.js Component for Creating Responsive Image Gallery

next-gallery

Next.js component for creating responsive image gallery

Installation

npm install next-gallery

Usage

import Gallery from "next-gallery"

const images = [
    { src: "https://picsum.photos/id/1018/1920/1080/", aspect_ratio: 16/9 },
    { src: "https://picsum.photos/id/1015/1920/1080/", aspect_ratio: 16/9 },
    ...
]
const widths = [ 500, 1000, 1600 ]
const ratios = [ 2.2, 4, 6, 8 ]

export default function MyGallery() {
    return (
        <Gallery {...{images, widths, ratios}} />
    )
}

NOTE: If you are using Next.js app directory, you must mark page or component which uses Gallery with use client;

More examples in pages folder.

props

• images - array of images where every image is an object with properties:
  • src - image source
  • aspect_ratio - image aspect ratio (width / height)
  • name (optional) - image name (any type, but the same type for all images in array*)
  • alt (default: "") - image alt
• widths - array of width breakpoints in pixels (e.g. [400, 800, 1200])
• ratios - array of aspect ratios, its length has to be bigger by one than widths array (e.g. [16/9, 32/9, 48/9, 64/9] along with widths above would result in row of proportion 16:9 (one 16:9 image or two 9:16, etc.) for screen widths 0-400px, 32:9 for 400-800px, etc.)
• percentVw (default: 100) - percent of viewport width that gallery takes (used for image optimization)
• margin (default: "2px") - margin between images, needs to be valid css value (e.g. "2px", "2rem", etc.)
• initState (optional) - every images keeps its own state, which can be read by overlay, this is initial state for every image (can be used e.g. for selecting images)
• imgLoader (default: next default loader) - image loader, see next/image
• overlay (optional) - NOTE: this property can be passed only if every image has name property. It is a function that takes image name, state, setState and returns React component that will be rendered as overlay for every image. Overlay can be used e.g. for displaying image name or for selecting images (see example below).

const images: NamedImage<string>[] = [
    { src: "https://picsum.photos/id/1018/1920/1080/", aspect_ratio: 16/9, name: 1 },
    { src: "https://picsum.photos/id/1015/1920/1080/", aspect_ratio: 16/9, name: 2 },
]
const widths = [ 500, 1000, 1600 ]
const ratios = [ 2.2, 4, 6, 8 ]

export default function() {
    return <Gallery {...{images, widths, ratios}} initState={false} overlay={(name, state, setState) => <MyOverlay selected={state} onClick={() => setState(s => !s)} />} />
}

(*) types can be mixed but then array of images has to be explicitly declared with NamedImage[] type (see example:)

const images: NamedImage<string|number>[] = [
    { src: "https://picsum.photos/id/1018/1920/1080/", aspect_ratio: 16/9, name: "image1" },
    { src: "https://picsum.photos/id/1015/1920/1080/", aspect_ratio: 16/9, name: 2 },
]

Download details:

Author: fmkra
Source code: https://github.com/fmkra/next-gallery

License: MIT license

#react-native #react #nextjs 

Build Splatboy Dev Portfolio Page with Nextjs and TailwindCSS

Next Portfolio

This is my "developer's" porfolio, built with Next.js, React and TailwindCSS. It is hosted on Vercel and self-hosted on port 3000.

Frameworks

Client: React, Next.js, TailwindCSS

Server: Node, Next.js

Link

The portfolio (main branch) is available at https://splatboy-dev.xyz. It will automatically update whenever I push to the repo.

Deployment

To deploy my portfolio (or your own) run:

  npm run start

Otherwise, when you're working on it, use

  npm run dev

, or:

  npx next dev

Feedback

If you have any feedback, please reach out to me via the issues/PR page. Otherwise, you can reach me at:

• contact@splatboy-dev.xyz
• Splatboy Dev#5923

Authors

• @splatboydev

Download details:

Author: splatboydev
Source code: https://github.com/splatboydev/Portfolio

#react #react-native #nextjs #tailwindcss 

Notionic: A Static Blog That Updates in Real Time with Next.js

Notionic

Notionic is a static blog that updates in real time, synchronizing changes to Notion pages without rebuilding the deployment.

Demo

• Notionic: https://notionic.vercel.app
• My Blog: https://zuolan.me

Features

• Incremental static regeneration
• Outline
• Theme switch
• Multi-language
• Native style comments
• Loading and transition animation
• Block page support
• SEO and Open Graph optimization
• Newsletter support
• Contact Form
• Telegram bot integration

Quick Start

• Duplicate Notionic template, and share it to the public
• Fork this project
• Customize blog.config.js file
• (Optional) Replace favicon.svg/png/ico in public folder with your own
• Modify lib/lang.js with your self introduction
• Deploy on Vercel, set following environment variables：
  • NOTION_PAGE_ID (Required): The ID of the Notion page you previously shared to the web, usually has 32 digits after your workspace address
  • eg: https://your-username.notion.site/<NOTION_PAGE_ID>?v=<view_id>

More details about Notionic deployment:

• English
• 中文

Reference & License

• Notion-X
• Nobelium
• NotionNext

The MIT License.

Download details:

Author: izuolan
Source code: https://github.com/izuolan/notionic

License: MIT license

#nextjs 

TypeScript Next.js JWT Authentication

TypeScript Next.js JWT Authentication

This project is a demonstration of authentication of an application in Next.js using JWT

Installation:

Make sure you have Node and NPM installed.

npm install

Create an .env file in root dir:

This file is necessary to run the application, the file should be like the following:

MONGO_URI=mongodb://localhost/test-auth
JWT_SECRET=MY_JWT_SECRET_I_MUST_REPLACE_THIS_IN_PRODUCTION

You must replace JWT_SECRET variable in production for added security

Starting the app:

# Run in dev mode:
npm run dev

# Run in production:
npm run build
npm start

Idea:

Server side rendered apps are awesome. They make a sweet spot between monolithic apps and single page apps powered by microservices. But they also add complexity to their creation. Keeping state on the server and the client in sync, routing on the client and the server, loading data before server rendering, etc. are some of the things that make our apps more complex. That is why frameworks such as Next.js exist, to solve most of those problems. However, things such as authentication are left to us. This is an attempt to implement the authentication based on JWT. The thing is that we can't store tokens in localStorage as we would do with SPA.

The idea is to receive token from the server on the client, store it in cookies, and then whenever a page renders on the server, we would be able to access the token from the cookie.

How it works:

The client:

The user sends an auth request from the client. In the response, JWT is received, and stored in browser cookies and redux store. Then the user has access to the token from the client, and can use it to access protected routes.

The server:

When the user makes a page request, cookies are also sent along, so the server can read them. To read it, the user is using the getServerSideProps lifecycle method, provided by Next.js with a Wrapper from next-redux-wrapper module. It gets an argument - the context object that contains some properties. You can read more about it here. On the req server property, we can access headers property which contains the cookie with the token. An action creator is dispatched to save the token in the redux store, and the app now has access to the token again.

Screenshot

Technologies

• Typescript
• Node
• Express
• MongoDB
• Passport
• Jsonwebtoken
• React
• Nextjs
• Redux
• Redux thunk

Download details:

Author: jaguar-person
Source code: https://github.com/jaguar-person/nextjs-typescript-jwt-authentication

#react-native #TypeScript  #nextjs 

Feedback Widget using Next.js

Feedback Widget

Code overview

-- WIP --

Getting Started

1. Clone the repo by running the following command in your terminal:

git clone https://github.com/m-abdelwahab/feedback-widget.git

1. Navigate to the directory where you cloned the project and install the dependencies by running the following command:

npm install
#or
yarn install

1. Rename the .env.example file in the root directory to .env.local

You're going to need to create a Postmark account and get your server token. Then, you can replace the POSTMARK_API_KEY value in the .env.local file with your server token. You'll also need to verify an email for sending emails from Postmark. You can do that by following this guide.

You can also replace the EMAIL_FROM value in the .env.local file with the email you verified in the previous step.

To set up rate limiting, you'll need to create an account on Upstash and provision a new Redis instance. Then, you can replace the UPSTASH_REDIS_REST_URL and UPSTASH_REDIS_REST_TOKEN values in the .env.local file with your API key.

1. Start the development server

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

This project is built using the following technologies:

• Next.js
• Framer Motion
• Tailwind CSS
• Postmark
• Zod
• React Hook Form
• React Query
• Radix UI
• Upstash Rate Limit

.env.example

POSTMARK_API_KEY = ""
UPSTASH_REDIS_REST_URL = ""
UPSTASH_REDIS_REST_TOKEN = ""
EMAIL_FROM = ""

.eslintrc.json

{
  "extends": "next/core-web-vitals"
}

.gitignore

# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# next.js
/.next/
/out/

# production
/build

# misc
.DS_Store
*.pem

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*

# local env files
.env*.local

# vercel
.vercel

# typescript
*.tsbuildinfo

Download details:

Author:  m-abdelwahab
Source code: https://github.com/m-abdelwahab/feedback-widget

#react-native #nextjs