Tenkes Posts - Answer Overflow

Tenkes

•Created by Tenkes on 6/28/2024 in #front-end

Problem with horizontal scroll

Hello. I'm working on Instagram-like clone and I'm having issue with making stories on home page scroll horizontally on overflow. I've been trying to fix it for quite some time now with no sign of success... So I copy pasted relevant code from my site to tailwind playground (and cleaned code for a bit) to replicate the issue. So this code is code before I started doing anything. If someone could make it work I'd really appreciate it. So what I need is for stories on top to have overflow-x: auto, but to actually work lol. And they shouldn't go behind right sidebar like they do. Also you might need to zoom out a bit to see right sidebar. https://play.tailwindcss.com/i21MnDZyT2

10 replies

KPCKevin Powell - Community

•Created by Tenkes on 5/17/2024 in #back-end

Why is my app slow in production?

I recently deployed my new Next.js 14 app to Vercel and noticed it takes quite a while to even show the page... navigating to other pages is slow as well. However when I run npm run build and then npm run start on my machine everything works nice and fast as it should. Did I maybe do something wrong while deploying? Any help would be much appreciated. Live site: https://bt-snapgram.vercel.app Source code: https://github.com/boristenkes/snapgram

3 replies

KPCKevin Powell - Community

•Created by Tenkes on 4/29/2024 in #ui-ux

Looking for inspiration on nice background for my website

Hello. I love background dub.co has on their website. It's like you can barely see it but it just adds nice feeling when you're there. Does anyone know some other websites with similar background gradient and grid? I'd like to use them for one of my projects, so might as well find some more inspiration on colors and stuff.

4 replies

KPCKevin Powell - Community

•Created by Tenkes on 4/14/2024 in #back-end

Next.js v14 | Issue with intercepting and parallel routes

Hello. I'm working on social media app. Here's file/folder structure of my app directory:

app
│   favicon.ico
│   globals.css
│   layout.tsx
│   page.tsx
│   
├───@dialog
│   │   default.tsx
│   │   
│   └───(.)post
│       └───[id]
│               page.tsx
│               
└───post
    ├───new
    │       page.tsx
    │       
    └───[id]
            page.tsx

app
│   favicon.ico
│   globals.css
│   layout.tsx
│   page.tsx
│   
├───@dialog
│   │   default.tsx
│   │   
│   └───(.)post
│       └───[id]
│               page.tsx
│               
└───post
    ├───new
    │       page.tsx
    │       
    └───[id]
            page.tsx

As you can see I'm using intercepting routes to display post details in dialog instead of redirecting user to separate page. You can also notice I have /post/new route (which takes me to form to create new post). Well I'm facing issue with that /post/new route. When I try to go to that route, I get 404 Not Found error. However hard-reload successfully takes me to the form, so I'm guessing issue is I don't have intercepting route for /post/new route. Would it be possible to let intercepting routes that I also have /post/new page that doesn't need intecepting? Has anyone faced this issue before? And how to fix it?

6 replies

KPCKevin Powell - Community

•Created by Tenkes on 4/6/2024 in #back-end

How to generate first frame of video as image?

60 replies

KPCKevin Powell - Community

•Created by Tenkes on 3/23/2024 in #back-end

MongoDB & mongoose | How to automatically remove element from array after certain amount of time?

I'm creating Instagram clone and right now working with stories. I need them to be visible to followers for only 24h, so I was thinking of giving each user activeStories field which would be array of story IDs that user posted within last 24h. But I'm not sure how I would remove them after 24h. Is there a built-in way to handle this or am I gonna have to handle that myself?

24 replies

KPCKevin Powell - Community

•Created by Tenkes on 1/6/2024 in #front-end

Next.js | What to use for icons?

Should I use <Image /> component from 'next/image' for icons or should I use something like react-icons for that instead?

3 replies

KPCKevin Powell - Community

•Created by Tenkes on 12/13/2023 in #back-end

Instagram clone | How to handle stories being visible only for 24h?

Title says it all. How would you handle Instagram stories being visible only 24h after being posted? I'm working with mongooose. I found there is an expires option available in second parameter of mongoose.Schema():

import mongoose from 'mongoose'

const oneDay = 86400 // seconds

const storySchema = new mongoose.Schema({
    author: { type: mongoose.SchemaTypes.ObjectId, ref: 'User' },
    content: { type: [String], required: true }
  },
  {
    timestamps: true,
    expires: oneDay // 👈 
  }
)

const Story = mongoose.models.Story || mongoose.model('Story', storySchema)

export default Story

import mongoose from 'mongoose'

const oneDay = 86400 // seconds

const storySchema = new mongoose.Schema({
    author: { type: mongoose.SchemaTypes.ObjectId, ref: 'User' },
    content: { type: [String], required: true }
  },
  {
    timestamps: true,
    expires: oneDay // 👈 
  }
)

const Story = mongoose.models.Story || mongoose.model('Story', storySchema)

export default Story

But I'm not sure what happens after it expires? I don't want it to get deleted. I still want to have the story in my DB (so user can add it to highlights, view it in his archive etc.), just not visible to users anymore. I was also thinking of just using createdAt which is coming from timestamps: true and then somehow filter stories that are posted within 24h and display them to the user. Not really sure if that's the best way to go. Any ideas/solutions/recommendations?

7 replies

KPCKevin Powell - Community

•Created by Tenkes on 8/12/2023 in #ui-ux

How to do this in Figma?

I've been following Gary's crash course on UI/UX and I've seen him do some stuff that Figma on my machine does different. Link: https://www.youtube.com/watch?v=QwSN4n2sjR8 So I've noticed when he moves stuff around he often gets those red lines showing him that the element he is moving is being aligned based on other element, and it kind of locks-in on when it aligns perfectly. Now I know it aligns automatically if I hold SHIFT, but how to get those red lines to appear? Usually happens around 1:11:43 Another thing that happens is that when he moves stuff it always moves by a round number, or a integer.. It will never move by 5.33px or 24.65px.. it will always move by 5px, 9px, 12px etc.. Also usually happens around given timestamp. Thanks in advance.

7 replies

KPCKevin Powell - Community

•Created by Tenkes on 4/2/2023 in #front-end

What's the best way to add smooth transition to theme change?

I want to add smooth transition when switching between dark and light theme, and I'm curious what would be the best way to add transition to elements that will change colors? I guess adding transition on all elements (* selector) would maybe slow down website? I was thinking of adding a separate class like .theme-transition that will have only transition on color and background-color and then adding that class to elements that are "affected" by theme change. Do you know any better, more efficient way?

2 replies

KPCKevin Powell - Community

•Created by Tenkes on 3/2/2023 in #front-end

Getting 404 error with font-faces even with correct file path

10 replies

KPCKevin Powell - Community

•Created by Tenkes on 2/28/2023 in #os-and-tools

How to disable fontLigatures for specific "strings"?

Hello. I love font ligatures, but I don't like how "==" and "===" turn into 2-3 lines one under another. Is there a way to disable font ligatures only for "==" and "==="?

2 replies

KPCKevin Powell - Community

•Created by Tenkes on 2/8/2023 in #front-end

Turning rating (number) into rating stars

14 replies

KPCKevin Powell - Community

•Created by Tenkes on 1/22/2023 in #front-end

Can't import SVG via ReactComponent

I need to import logo.svg, but I'll have to change its colors later on so I can't just import it and use it as src in <img> tag. So I've googled if it's possible to import it as a component and I've got people telling me to do it this way:

import React from 'react';
import { ReactComponent as Logo } from './assets/logo.svg';

function App() {
  return (
    <div className="App">
      <Logo />
    </div>
  )
}

export default App

import React from 'react';
import { ReactComponent as Logo } from './assets/logo.svg';

function App() {
  return (
    <div className="App">
      <Logo />
    </div>
  )
}

export default App

But I get a following error:

Uncaught SyntaxError: The requested module '/src/assets/logo.svg?import' does not provide an export named 'ReactComponent' (at App.jsx:3:10)

I'm in VS code and I can ctrl + click on file path, and it takes me to my logo, so I know file path is not the issue. If anyone experienced this issue and found solution please let me know, if not, do you know other way I can achieve what I want?

21 replies

Gaming

Programming