Git Product home page Git Product logo

pyconid-2021-fe's Introduction

๐Ÿ pycon.id

Frontend side for PyCon Indonesia 2023 website.

Check out:

Getting Started

Read the Remix Docs to understand about Remix.

Tips:

  • If you're new, focus on Remix basics, don't use the Stacks yet.
  • If you're experienced, can already use various integration such as Prisma ORM and database.

Tech Stack

  1. TypeScript: Typed language
    • Related to JavaScript, HTML, CSS
  2. React: UI library
  3. Remix: Web framework
  4. Tailwind CSS: Styling
  5. Radix UI: Interactive components
  6. Prisma: Database ORM
  7. PlanetScale: MySQL-compatible serverless database platform
    • MySQL: Database management system
  8. Vercel: App deployment

Setup

Create the .env file from the example .env file.

cp -i .env.example .env

Let's configure the required environment variables in the .env file if local, otherwise in the project settings, for:

  • DATABASE_URL
  • SESSION_SECRET (will be used later)

Create a PlanetScale account to have a production-ready MySQL instance for development. After the database has been created, "Get the connection string" and select "Prisma", then copy the full DATABASE_URL.

Keep in mind the free plan only allow for 1 database. So either you keep it, delete it when unused, or upgrade your plan.

Generate a random string for the SESSION_SECRET using openssl rand -base64 32 on the terminal or you can put any random text.

DATABASE_URL="mysql://username:[email protected]/pyconid?sslaccept=strict"
SESSION_SECRET="random_secret_text"

Development

To run the app locally, make sure the project's local dependencies are installed:

pnpm install

Sync between the schema of Prisma and the database, which we can do regularly while updating the Prisma schema:

pnpm db:push

Then seed the initial data when needed:

pnpm db:seed

Check if the build is fine:

pnpm build

If everything works fine, start the Remix development server like so:

pnpm dev

Open up http://localhost:3000 and it should be ready to go!

The vercel dev command provided by Vercel CLI can also be used.

Deployment

Notice
The @remix-run/vercel runtime adapter has been deprecated in favor of out of the box Vercel functionality and will be removed in Remix v2.
This means no more using the Vercel template & can just use the Remix template instead.

After having run the create-remix command and selected "Vercel" as a deployment target, import the Git repository into Vercel, and it will be deployed.

If want to avoid using a Git repository, deploy the directory by running Vercel CLI:

pnpm i -g vercel
vercel

It is generally recommended to use a Git repository, because future commits will then automatically be deployed by Vercel, through its Git Integration.

pyconid-2021-fe's People

Contributors

aldamr01 avatar bandung-python avatar dmaharika avatar fadoilulmun-im avatar jeeehaan avatar mhaidarhanif avatar milhamm avatar pardi123 avatar pyconid-dev avatar ridhof avatar vhermawan avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

pyconid-2021-fe's Issues

[Improvement Suggestion] Adjust Margin Footer.

Ada beberapa issue, terkait tampilan di web browser saya di halaman sponsor, yaitu footer dan main content tidak ada margin nya, jadi tampilanya terlihat seperti ini.

image

mungkin bisa di improve dengan menambahkan margin agar terlihat agak joss seperti gambar berikut
image

Thankyou.

[Jessy] Fix hero section responsive in larger tablet screen

As you can see at images below, there are an issue with hero section responsiveness. The padding or margin from the content is missing, so the content is side-by-side with the browser line.ng

Image

If you need help, just mention any of us either in Github or Discord.
good luck!

Determine to upgrade or use which analytics service

Since Vercel Analytics for https://pycon.id has reached its free limit due to a large number of visitors.

Next up, either we have to upgrade it. Or it can be replaced with either an analytics service like Google Analytics or Microsoft Clarity https://clarity.microsoft.com. However, there is a tradeoff between privacy and the simplicity of the data.

Alternatively, we can consider self-hosting an open-source solution like Plausible https://github.com/plausible/analytics or Umami https://github.com/umami-software/umami so it can be run forever.

Error: this Serverless Function has crashed with FUNCTION_INVOCATION_FAILED

I accessed pycon.id and got error page rendered as below:

pycon.id serverless function has crashed

and when I check the Vercel log, I found this log:

Prisma has detected that this project was built on Vercel, which caches dependencies. This leads to an outdated Prisma Client because Prisma's auto-generation isn't triggered. To fix this, make sure to run the `prisma generate` command during the build process.

Learn how: https://pris.ly/d/vercel-build
PrismaClientInitializationError: Prisma has detected that this project was built on Vercel, which caches dependencies. This leads to an outdated Prisma Client because Prisma's auto-generation isn't triggered. To fix this, make sure to run the `prisma generate` command during the build process.

Learn how: https://pris.ly/d/vercel-build
    at Qs (/var/task/node_modules/.pnpm/@[email protected][email protected]/node_modules/@prisma/client/runtime/library.js:114:69)
    at new t (/var/task/node_modules/.pnpm/@[email protected][email protected]/node_modules/@prisma/client/runtime/library.js:126:2533)
    at Object.<anonymous> (/var/task/build/build-nodejs-eyJydW50aW1lIjoibm9kZWpzIn0.js:151:57)
    at Module._compile (node:internal/modules/cjs/loader:1254:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
    at Module.load (node:internal/modules/cjs/loader:1117:32)
    at Function.Module._load (node:internal/modules/cjs/loader:958:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25) {
  clientVersion: '5.0.0',
  errorCode: undefined
}
RequestId: 0d881e06-10c5-497c-995b-0582f3b93f8e Error: Runtime exited with error: exit status 1
Runtime.ExitError

I will quick check for an hour or two to fix this by adding recommended syntax during build

Navbar Text not centered

image

Aku pakai laptop 1920x1080px dengan scaling 125%. Buka di Chrome dan Firefox sama. Tulisan di Call for Proposal sama Code of Conduct ngga enak dilihat. Saranku antara dia dibikin jadi satu baris, atau kalau dua baris dibikin center.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.