I built a link shortener app with NextJS

Ewelina Krzeptowska — Tue, 01 Jun 2021 21:00:13 +0000

Live demo: l.ekrzeptowski.pl

Libraries used:

NextAuth.js - authentication for Next.js
Prisma 2 - Next-generation ORM for Node.js and TypeScript
React query - used for fetching data and state management
React Hook Form - used for URL input state management and validation
Tailwind CSS - A CSS framework used for styling

I'd love to hear your feedback about this app. You can also introduce your ideas to this project by contributing to it.

Here's a link for the GitHub repo:

ekrzeptowski / surl

A modern link shortener

Teeny

Teeny is a modern link shortener based on Next.js

Demo: https://teeny.ovh/

Getting Started

1. Download the code of this repository by cloning it:

git clone https://github.com/ekrzeptowski/teeny.git

2. Then navigate to directory of the cloned repository and install required dependencies:

cd teeny

npm install
# or
yarn install

3. Configure environmental variables:

DATABASE_URL: Postgres database connection URL (https://www.prisma.io/docs/concepts/database-connectors/postgresql)
NEXTAUTH_URL: URL of the app
NEXT_PUBLIC_ORIGIN: URL of the app

4. Configure authentication providers according to:

https://next-auth.js.org/configuration/providers

5. Finally run the app in dev environment or in production:

npm run dev
# or
npm run build
npm start

View on GitHub

Social assistant - my first full stack project

Ewelina Krzeptowska — Sat, 13 Feb 2021 20:15:48 +0000

The idea

Most of the apps, made to show the number of unfollowers on Twitter, I tried were performing too slow because of server-side rendering, or the UI was not optimized for mobile.

That's why I decided to build a new app to perform this task.

Live demo: https://sa.ekrzeptowski.pl

Tech stack

Social assistant is built using MERN stack:

MongoDB
ExpressJS
React
Node.js

Frontend

The frontend side of the Social assistant is licensed under the MIT license and was written using Gatsby.js.

ekrzeptowski / social-assist-ui

React-based UI for the Social Assistant app

Libraries used:

Gatsby.js - it has helped to improve SEO and loading experience of the landing page.
Material-UI - Material Design React UI framework
Redux with Redux Toolkit - used for state management
gatsby-plugin-mdx - used to render the privacy policy Markdown page

Backend

The backend side of the Social assistant is running under Node.js.

Libraries used:

Express - a Node.js framework
MongoDB - database
ws - WebSocket server used to broadcast actual data sync status
passport.js - used for Twitter authentication
twitter-lite - lightweight library for Twitter API
Agenda - (A lightweight job scheduling library for Node.js) used for scheduling user data updates

DEV Community: Ewelina Krzeptowska

I built a link shortener app with NextJS

Libraries used:

ekrzeptowski / surl

A modern link shortener

Teeny

Getting Started

1. Download the code of this repository by cloning it:

2. Then navigate to directory of the cloned repository and install required dependencies:

3. Configure environmental variables:

4. Configure authentication providers according to:

5. Finally run the app in dev environment or in production:

Social assistant - my first full stack project

The idea

Tech stack

Frontend

ekrzeptowski / social-assist-ui

React-based UI for the Social Assistant app

Libraries used:

Backend

Libraries used: