CRYPTO-LOTTERY

KO | EN

gitlite — search

#android #docker #hacktoberfest #golang #java #php #python #kotlin #wordpress #ios #javascript #vim

★ 45 Open GitHub ↗

CRYPTO LOTTERY with NEXT.JS! (React.js, Solidity, TypeScript, TailwindCSS, thirdweb)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<img src="https://www.nicepng.com/png/full/152-1525748_ethereum-logo-png.png" alt="logo" width="200" height="280" />
  
# CRYPTO LOTTERY with React js
  
  <p>
CRYPTO LOTTERY with NEXT.JS! (React.js, Solidity, TypeScript, TailwindCSS, thirdweb)
  </p>

<a href="https://crypto-lottery-eta.vercel.app" target="_blank">![](https://img.shields.io/website-up-down-green-red/http/monip.org.svg)</a>
![](https://img.shields.io/badge/Maintained-Yes-indigo)
![](https://img.shields.io/github/forks/SashenJayathilaka/CRYPTO-LOTTERY.svg)
![](https://img.shields.io/github/stars/SashenJayathilaka/CRYPTO-LOTTERY.svg)
![](https://img.shields.io/github/issues/SashenJayathilaka/CRYPTO-LOTTERY)
![](https://img.shields.io/github/last-commit/SashenJayathilaka/CRYPTO-LOTTERY)

<h4>
    <a href="https://crypto-lottery-eta.vercel.app">View Demo</a>
  <span> · </span>
    <a href="https://github.com/SashenJayathilaka/CRYPTO-LOTTERY/blob/master/README.md">Documentation</a>
  <span> · </span>
    <a href="https://github.com/SashenJayathilaka/CRYPTO-LOTTERY/issues">Report Bug</a>
  <span> · </span>
    <a href="https://github.com/SashenJayathilaka/CRYPTO-LOTTERY/issues">Request Feature</a>
  </h4>
</div>

<br />

## :notebook_with_decorative_cover: Table of Contents

- [About the Project](#star2-about-the-project)
  * [Screenshots](#camera-screenshots)
  * [Tech Stack](#space_invader-tech-stack)
- [Getting Started](#toolbox-getting-started)
  * [Prerequisites](#bangbang-prerequisites)
  * [Installation](#gear-installation)
  * [Run Locally](#running-run-locally)
  * [Deployment](#triangular_flag_on_post-deployment)
- [Contact](#handshake-contact)

## :star2: About the Project

### :camera: Screenshots

## <a href="https://crypto-lottery-eta.vercel.app/" target="_blank">LIVE DEMO 💥</a>

![forthebadge](https://forthebadge.com/images/badges/built-with-love.svg)
![forthebadge](https://forthebadge.com/images/badges/for-you.svg)
![forthebadge](https://forthebadge.com/images/badges/powered-by-coffee.svg)

### :space_invader: Tech Stack

<details>
  <summary>Client</summary>
  <ul>
    <li><a href="https://#/">Typescript</a></li>
  <li><a href="https://reactjs.org/">React.js</a></li>
     <li><a href="https://#/">Next Js</a></li>
  </ul>
</details>

<details>
  <summary>Backend</summary>
  <ul>
      <li><a href="https://#/">Solidity</a></li>
      <li><a href="https://#/">thirdweb sdk</a></li>
  </ul>
</details>

<br />

## 	:toolbox: Getting Started
### :bangbang: Prerequisites

- Install Node JS in your computer <a href='https://nodejs.org/en/'>HERE</a>
- MetaMask <a href='https://metamask.io/download'>HERE</a>
- thirdweb <a href="https://thirdweb.com">HERE</a>

![](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)
![](https://img.shields.io/badge/next.js-20232A?style=for-the-badge&logo=next.js&logoColor=61DAFB)

### :gear: Installation

```
npx create-next-app@latest --ts my-project
```
```
cd my-project
```

Install dependencies

### :test_tube: Install Tailwind CSS with Next.js
#### Install Tailwind CSS
![](https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white)

Install tailwindcss and its peer dependencies via npm, and then run the init command to generate both ``tailwind.config.js`` and ``postcss.config.js``.

```
npm install -D tailwindcss postcss autoprefixer
```
```
npx tailwindcss init -p
```
#### Configure your template paths
Add the paths to all of your template files in your ``tailwind.config.js`` file.
<br>
```
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```
#### Add the Tailwind directives to your CSS
Add the ``@tailwind`` directives for each of Tailwind’s layers to your ``./styles/globals.css`` file.
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```
<a href="https://github.com/SashenJayathilaka/CRYPTO-LOTTERY/blob/master/package.json" target="_blank">🔶 Other Dependency Info</a>

### :running: Run Locally

![](https://img.shields.io/badge/GIT-E44C30?style=for-the-badge&logo=git&logoColor=white)

Clone the project

```bash
  git clone https://github.com/SashenJayathilaka/CRYPTO-LOTTERY.git
```

Go to the project directory

```bash
  cd my-project
```

Install dependencies

```bash
  npm install
```

This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).

First, run the development server:

```bash
npm run dev
# or
yarn dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.

[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.

The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.

### Learn More

To learn more about Next.js, take a look at the following resources:

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!

### :triangular_flag_on_post: Deployment

To deploy this project run

##### Deploy on Vercel

![](https://img.shields.io/badge/Vercel-000000?style=for-the-badge&logo=vercel&logoColor=white)

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.

Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

## :handshake: Contact

Sashen - [@twitter_handle](https://twitter.com/SashenHasinduJ) - sashenjayathilaka95@gmail.com

Project Link: [https://github.com/SashenJayathilaka/CRYPTO-LOTTERY.git](https://github.com/SashenJayathilaka/CRYPTO-LOTTERY.git)

CRYPTO-LOTTERY

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README