-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: 🎸 rerwite using react.js via next.js
- Loading branch information
1 parent
951bf81
commit 45e4733
Showing
26 changed files
with
2,548 additions
and
79 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,76 +1,37 @@ | ||
# Logs | ||
logs | ||
*.log | ||
npm-debug.log* | ||
yarn-debug.log* | ||
yarn-error.log* | ||
|
||
# Runtime data | ||
pids | ||
*.pid | ||
*.seed | ||
*.pid.lock | ||
|
||
# Directory for instrumented libs generated by jscoverage/JSCover | ||
lib-cov | ||
|
||
# Coverage directory used by tools like istanbul | ||
coverage | ||
|
||
# nyc test coverage | ||
.nyc_output | ||
|
||
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) | ||
.grunt | ||
|
||
# Bower dependency directory (https://bower.io/) | ||
bower_components | ||
|
||
# node-waf configuration | ||
.lock-wscript | ||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. | ||
|
||
# Compiled binary addons (https://nodejs.org/api/addons.html) | ||
build/Release | ||
# dependencies | ||
/node_modules | ||
/.pnp | ||
.pnp.js | ||
|
||
# Dependency directories | ||
node_modules/ | ||
jspm_packages/ | ||
# testing | ||
/coverage | ||
|
||
# TypeScript v1 declaration files | ||
typings/ | ||
# next.js | ||
/.next/ | ||
/out/ | ||
|
||
# Optional npm cache directory | ||
.npm | ||
# production | ||
/build | ||
|
||
# Optional eslint cache | ||
.eslintcache | ||
# misc | ||
.DS_Store | ||
*.pem | ||
|
||
# Optional REPL history | ||
.node_repl_history | ||
|
||
# Output of 'npm pack' | ||
*.tgz | ||
|
||
# Yarn Integrity file | ||
.yarn-integrity | ||
|
||
# dotenv environment variables file | ||
.env | ||
|
||
# parcel-bundler cache (https://parceljs.org/) | ||
.cache | ||
|
||
# next.js build output | ||
.next | ||
|
||
# nuxt.js build output | ||
.nuxt | ||
# debug | ||
npm-debug.log* | ||
yarn-debug.log* | ||
yarn-error.log* | ||
|
||
# vuepress build output | ||
.vuepress/dist | ||
# local env files | ||
.env.local | ||
.env.development.local | ||
.env.test.local | ||
.env.production.local | ||
|
||
# Serverless directories | ||
.serverless | ||
# vercel | ||
.vercel | ||
|
||
# FuseBox cache | ||
.fusebox/ | ||
# typescript | ||
*.tsbuildinfo |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,27 @@ | ||
# Type-N-Speak | ||
# Next.js + Tailwind CSS Example | ||
|
||
> Type and speak app with speech synthesis using the [Web Speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API) | ||
This example shows how to use [Tailwind CSS](https://tailwindcss.com/) [(v3.0)](https://tailwindcss.com/blog/tailwindcss-v3) with Next.js. It follows the steps outlined in the official [Tailwind docs](https://tailwindcss.com/docs/guides/nextjs). | ||
|
||
[App Demo](https://bradtraversy.github.io/type-n-speak) | ||
## Preview | ||
|
||
Preview the example live on [StackBlitz](http://stackblitz.com/): | ||
|
||
[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-tailwindcss) | ||
|
||
## Deploy your own | ||
|
||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): | ||
|
||
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss&project-name=with-tailwindcss&repository-name=with-tailwindcss) | ||
|
||
## How to use | ||
|
||
Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example: | ||
|
||
```bash | ||
npx create-next-app --example with-tailwindcss with-tailwindcss-app | ||
# or | ||
yarn create next-app --example with-tailwindcss with-tailwindcss-app | ||
``` | ||
|
||
Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
/// <reference types="next" /> | ||
/// <reference types="next/image-types/global" /> | ||
|
||
// NOTE: This file should not be edited | ||
// see https://nextjs.org/docs/basic-features/typescript for more information. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
/** @type {import('next').NextConfig} */ | ||
module.exports = { | ||
reactStrictMode: true, | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,15 +1,21 @@ | ||
{ | ||
"name": "type-n-speak", | ||
"homepage": "https://bradtraversy.github.io/type-n-speak", | ||
"version": "1.0.0", | ||
"description": "Text to speak and synthesis app using the web speech API", | ||
"main": "index.js", | ||
"private": true, | ||
"scripts": { | ||
"deploy": "gh-pages -d dist" | ||
"dev": "next dev", | ||
"build": "next build", | ||
"start": "next start" | ||
}, | ||
"author": "Brad Traversy", | ||
"license": "MIT", | ||
"dependencies": { | ||
"gh-pages": "^3.0.0" | ||
"next": "latest", | ||
"react": "^17.0.2", | ||
"react-dom": "^17.0.2" | ||
}, | ||
"devDependencies": { | ||
"@types/node": "17.0.4", | ||
"@types/react": "17.0.38", | ||
"autoprefixer": "^10.4.0", | ||
"postcss": "^8.4.5", | ||
"tailwindcss": "^3.0.7", | ||
"typescript": "4.5.4" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
import '../styles/globals.css' | ||
import type { AppProps } from 'next/app' | ||
|
||
function MyApp({ Component, pageProps }: AppProps) { | ||
return <Component {...pageProps} /> | ||
} | ||
|
||
export default MyApp |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction | ||
import type { NextApiRequest, NextApiResponse } from 'next' | ||
|
||
type Data = { | ||
name: string | ||
} | ||
|
||
export default function handler( | ||
req: NextApiRequest, | ||
res: NextApiResponse<Data> | ||
) { | ||
res.status(200).json({ name: 'John Doe' }) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,82 @@ | ||
import Head from 'next/head' | ||
|
||
export default function Home() { | ||
return ( | ||
<div className="flex flex-col items-center justify-center min-h-screen py-2"> | ||
<Head> | ||
<title>Create Next App</title> | ||
<link rel="icon" href="/favicon.ico" /> | ||
</Head> | ||
|
||
<main className="flex flex-col items-center justify-center w-full flex-1 px-20 text-center"> | ||
<h1 className="text-6xl font-bold"> | ||
Welcome to{' '} | ||
<a className="text-blue-600" href="https://nextjs.org"> | ||
Next.js! | ||
</a> | ||
</h1> | ||
|
||
<p className="mt-3 text-2xl"> | ||
Get started by editing{' '} | ||
<code className="p-3 font-mono text-lg bg-gray-100 rounded-md"> | ||
pages/index.tsx | ||
</code> | ||
</p> | ||
|
||
<div className="flex flex-wrap items-center justify-around max-w-4xl mt-6 sm:w-full"> | ||
<a | ||
href="https://nextjs.org/docs" | ||
className="p-6 mt-6 text-left border w-96 rounded-xl hover:text-blue-600 focus:text-blue-600" | ||
> | ||
<h3 className="text-2xl font-bold">Documentation →</h3> | ||
<p className="mt-4 text-xl"> | ||
Find in-depth information about Next.js features and API. | ||
</p> | ||
</a> | ||
|
||
<a | ||
href="https://nextjs.org/learn" | ||
className="p-6 mt-6 text-left border w-96 rounded-xl hover:text-blue-600 focus:text-blue-600" | ||
> | ||
<h3 className="text-2xl font-bold">Learn →</h3> | ||
<p className="mt-4 text-xl"> | ||
Learn about Next.js in an interactive course with quizzes! | ||
</p> | ||
</a> | ||
|
||
<a | ||
href="https://github.com/vercel/next.js/tree/master/examples" | ||
className="p-6 mt-6 text-left border w-96 rounded-xl hover:text-blue-600 focus:text-blue-600" | ||
> | ||
<h3 className="text-2xl font-bold">Examples →</h3> | ||
<p className="mt-4 text-xl"> | ||
Discover and deploy boilerplate example Next.js projects. | ||
</p> | ||
</a> | ||
|
||
<a | ||
href="https://vercel.com/import?filter=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app" | ||
className="p-6 mt-6 text-left border w-96 rounded-xl hover:text-blue-600 focus:text-blue-600" | ||
> | ||
<h3 className="text-2xl font-bold">Deploy →</h3> | ||
<p className="mt-4 text-xl"> | ||
Instantly deploy your Next.js site to a public URL with Vercel. | ||
</p> | ||
</a> | ||
</div> | ||
</main> | ||
|
||
<footer className="flex items-center justify-center w-full h-24 border-t"> | ||
<a | ||
className="flex items-center justify-center" | ||
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app" | ||
target="_blank" | ||
rel="noopener noreferrer" | ||
> | ||
Powered by{' '} | ||
<img src="/vercel.svg" alt="Vercel Logo" className="h-4 ml-2" /> | ||
</a> | ||
</footer> | ||
</div> | ||
) | ||
} |
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,76 @@ | ||
# Logs | ||
logs | ||
*.log | ||
npm-debug.log* | ||
yarn-debug.log* | ||
yarn-error.log* | ||
|
||
# Runtime data | ||
pids | ||
*.pid | ||
*.seed | ||
*.pid.lock | ||
|
||
# Directory for instrumented libs generated by jscoverage/JSCover | ||
lib-cov | ||
|
||
# Coverage directory used by tools like istanbul | ||
coverage | ||
|
||
# nyc test coverage | ||
.nyc_output | ||
|
||
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) | ||
.grunt | ||
|
||
# Bower dependency directory (https://bower.io/) | ||
bower_components | ||
|
||
# node-waf configuration | ||
.lock-wscript | ||
|
||
# Compiled binary addons (https://nodejs.org/api/addons.html) | ||
build/Release | ||
|
||
# Dependency directories | ||
node_modules/ | ||
jspm_packages/ | ||
|
||
# TypeScript v1 declaration files | ||
typings/ | ||
|
||
# Optional npm cache directory | ||
.npm | ||
|
||
# Optional eslint cache | ||
.eslintcache | ||
|
||
# Optional REPL history | ||
.node_repl_history | ||
|
||
# Output of 'npm pack' | ||
*.tgz | ||
|
||
# Yarn Integrity file | ||
.yarn-integrity | ||
|
||
# dotenv environment variables file | ||
.env | ||
|
||
# parcel-bundler cache (https://parceljs.org/) | ||
.cache | ||
|
||
# next.js build output | ||
.next | ||
|
||
# nuxt.js build output | ||
.nuxt | ||
|
||
# vuepress build output | ||
.vuepress/dist | ||
|
||
# Serverless directories | ||
.serverless | ||
|
||
# FuseBox cache | ||
.fusebox/ |
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
# Type-N-Speak | ||
|
||
> Type and speak app with speech synthesis using the [Web Speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API) | ||
[App Demo](https://bradtraversy.github.io/type-n-speak) |
File renamed without changes
File renamed without changes
File renamed without changes.
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
{ | ||
"name": "type-n-speak", | ||
"homepage": "https://bradtraversy.github.io/type-n-speak", | ||
"version": "1.0.0", | ||
"description": "Text to speak and synthesis app using the web speech API", | ||
"main": "index.js", | ||
"scripts": { | ||
"deploy": "gh-pages -d dist" | ||
}, | ||
"author": "Brad Traversy", | ||
"license": "MIT", | ||
"dependencies": { | ||
"gh-pages": "^3.0.0" | ||
} | ||
} |
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
module.exports = { | ||
plugins: { | ||
tailwindcss: {}, | ||
autoprefixer: {}, | ||
}, | ||
} |
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
@tailwind base; | ||
@tailwind components; | ||
@tailwind utilities; |
Oops, something went wrong.
45e4733
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs: