Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bchiang7/time-to-have-more-fun
A little app to choose my next vacation destination built with Next.js, Tailwind CSS, and Firebase
https://github.com/bchiang7/time-to-have-more-fun
firebase nextjs tailwindcss
Last synced: about 2 months ago
JSON representation
A little app to choose my next vacation destination built with Next.js, Tailwind CSS, and Firebase
- Host: GitHub
- URL: https://github.com/bchiang7/time-to-have-more-fun
- Owner: bchiang7
- Created: 2020-01-02T04:19:17.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2023-01-05T16:22:49.000Z (almost 2 years ago)
- Last Synced: 2024-10-11T13:31:16.588Z (2 months ago)
- Topics: firebase, nextjs, tailwindcss
- Language: JavaScript
- Homepage: https://time-to-have-more-fun.now.sh
- Size: 1.12 MB
- Stars: 72
- Watchers: 2
- Forks: 22
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Time to have more fun!
A small web app to help us decide where to travel, built with [Next.js](https://nextjs.org/), [Firebase](https://firebase.google.com/), and [Tailwind CSS](https://tailwindcss.com/)
## Set up
1. `yarn`
2. `npm install -g now`
3. Set up [now secrets](https://zeit.co/docs/v2/serverless-functions/env-and-secrets) for Firebase env variables
4. `now dev`
---
This project was bootstrapped with [Create Next App](https://github.com/segmentio/create-next-app).
Find the most recent version of this guide at [here](https://github.com/segmentio/create-next-app/blob/master/lib/templates/default/README.md). And check out [Next.js repo](https://github.com/zeit/next.js) for the most up-to-date info.
## Table of Contents
- [Time to have more fun!](#time-to-have-more-fun)
- [Set up](#set-up)
- [Table of Contents](#table-of-contents)
- [Questions? Feedback](#questions-feedback)
- [Folder Structure](#folder-structure)
- [Available Scripts](#available-scripts)
- [`npm run dev`](#npm-run-dev)
- [`npm run build`](#npm-run-build)
- [`npm run start`](#npm-run-start)
- [Using CSS](#using-css)
- [Adding Components](#adding-components)
- [`./components/simple.js`](#componentssimplejs)
- [`./components/complex.js`](#componentscomplexjs)
- [Fetching Data](#fetching-data)
- [`./pages/stars.js`](#pagesstarsjs)
- [Custom Server](#custom-server)
- [Syntax Highlighting](#syntax-highlighting)
- [Deploy to Now](#deploy-to-now)
- [Something Missing](#something-missing)
## Questions? Feedback
Check out [Next.js FAQ & docs](https://github.com/zeit/next.js#faq) or [let us know](https://github.com/segmentio/create-next-app/issues) your feedback.
## Folder Structure
After creating an app, it should look something like:
```md
.
├── README.md
├── components
│ ├── head.js
│ └── nav.js
├── next.config.js
├── node_modules
│ ├── [...]
├── package.json
├── pages
│ └── index.js
├── static
│ └── favicon.ico
└── yarn.lock
```
Routing in Next.js is based on the file system, so `./pages/index.js` maps to the `/` route and
`./pages/about.js` would map to `/about`.
The `./public` directory maps to `/` in the `next` server, so you can put all your
other static resources like images or compiled CSS in there.
Out of the box, we get:
- Automatic transpilation and bundling (with webpack and babel)
- Hot code reloading
- Server rendering and indexing of `./pages`
- Static file serving. `./public/` is mapped to `/`
Read more about [Next's Routing](https://github.com/zeit/next.js#routing)
## Available Scripts
In the project directory, you can run:
### `npm run dev`
Runs the app in the development mode.
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
The page will reload if you make edits.
You will also see any errors in the console.
### `npm run build`
Builds the app for production to the `.next` folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
### `npm run start`
Starts the application in production mode.
The application should be compiled with \`next build\` first.
See the section in Next docs about [deployment](https://github.com/zeit/next.js/wiki/Deployment) for more information.
## Using CSS
[`styled-jsx`](https://github.com/zeit/styled-jsx) is bundled with next to provide support for isolated scoped CSS. The aim is to support "shadow CSS" resembling of Web Components, which unfortunately [do not support server-rendering and are JS-only](https://github.com/w3c/webcomponents/issues/71).
```jsx
export default () => (
Hello world
scoped!
{`
p {
color: blue;
}
div {
background: red;
}
@media (max-width: 600px) {
div {
background: blue;
}
}
`}
);
```
Read more about [Next's CSS features](https://github.com/zeit/next.js#css).
## Adding Components
We recommend keeping React components in `./components` and they should look like:
### `./components/simple.js`
```jsx
const Simple = () =>
Simple Component;
export default Simple; // don't forget to export default!
```
### `./components/complex.js`
```jsx
import { Component } from 'react';
class Complex extends Component {
state = {
text: 'World',
};
render() {
const { text } = this.state;
return
Hello {text};
}
}
export default Complex; // don't forget to export default!
```
## Fetching Data
You can fetch data in `pages` components using `getInitialProps` like this:
### `./pages/stars.js`
```jsx
const Page = props =>
Next stars: {props.stars};
Page.getInitialProps = async ({ req }) => {
const res = await fetch('https://api.github.com/repos/zeit/next.js');
const json = await res.json();
const stars = json.stargazers_count;
return { stars };
};
export default Page;
```
For the initial page load, `getInitialProps` will execute on the server only. `getInitialProps` will only be executed on the client when navigating to a different route via the `Link` component or using the routing APIs.
_Note: `getInitialProps` can **not** be used in children components. Only in `pages`._
Read more about [fetching data and the component lifecycle](https://github.com/zeit/next.js#fetching-data-and-component-lifecycle)
## Custom Server
Want to start a new app with a custom server? Run `create-next-app --example customer-server custom-app`
Typically you start your next server with `next start`. It's possible, however, to start a server 100% programmatically in order to customize routes, use route patterns, etc
This example makes `/a` resolve to `./pages/b`, and `/b` resolve to `./pages/a`:
```jsx
const { createServer } = require('http');
const { parse } = require('url');
const next = require('next');
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();
app.prepare().then(() => {
createServer((req, res) => {
// Be sure to pass `true` as the second argument to `url.parse`.
// This tells it to parse the query portion of the URL.
const parsedUrl = parse(req.url, true);
const { pathname, query } = parsedUrl;
if (pathname === '/a') {
app.render(req, res, '/b', query);
} else if (pathname === '/b') {
app.render(req, res, '/a', query);
} else {
handle(req, res, parsedUrl);
}
}).listen(3000, err => {
if (err) throw err;
console.log('> Ready on http://localhost:3000');
});
});
```
Then, change your `start` script to `NODE_ENV=production node server.js`.
Read more about [custom server and routing](https://github.com/zeit/next.js#custom-server-and-routing)
## Syntax Highlighting
To configure the syntax highlighting in your favorite text editor, head to the [relevant Babel documentation page](https://babeljs.io/docs/editors) and follow the instructions. Some of the most popular editors are covered.
## Deploy to Now
[now](https://zeit.co/now) offers a zero-configuration single-command deployment.
1. Install the `now` command-line tool either via the recommended [desktop tool](https://zeit.co/download) or via node with `npm install -g now`.
2. Run `now` from your project directory. You will see a **now.sh** URL in your output like this:
```
> Ready! https://your-project-dirname-tpspyhtdtk.now.sh (copied to clipboard)
```
Paste that URL into your browser when the build is complete, and you will see your deployed app.
You can find more details about [`now` here](https://zeit.co/now).
## Something Missing
If you have ideas for how we could improve this readme or the project in general, [let us know](https://github.com/segmentio/create-next-app/issues) or [contribute some!](https://github.com/segmentio/create-next-app/edit/master/lib/templates/default/README.md)