Spiking on the API using Next.js

QuincyLarson commented 4 years ago

Would anyone be interested in attempting to use Next.js to build a rough prototype of this application? I've read a lot of good things about Next.js, but ultimately we will see whether it's a good fit when someone digs into it and builds out some of the core routes.

JKHarley commented 4 years ago

I would be interested in building a prototype with Next.js. I think it would be a good fit with the SSR, routing and code splitting.

psyked commented 4 years ago

This aligns with my immediate thoughts about the tech stack so I’d be happy to give it a go. Do you have any high level route / visuals planned?

Zeko369 commented 4 years ago

What do you guys think about using Next.js embeded API routes for backend? For a simple prototyping app that seems like a good idea.

MirzaChilman commented 4 years ago

What do you guys think about using Next.js embeded API routes for backend? For a simple prototyping app that seems like a good idea.

You guys can refer to this docs https://nextjs.org/docs#api-routes

Zeko369 commented 4 years ago

Yeah we were just talking about that in the discord

nezdemkovski commented 4 years ago

Hey, work with next.js from the very first release, glad to help with it. Using new api routes is a great idea!

francocorreasosa commented 4 years ago

This is definitely a good option to go with.

nik-john commented 4 years ago

So I just created an app with sample API routes on Next for a project I'm working on - I can provide a sample repo for anyone who wants to take a look - is there a Discord channel for frontend where I can post the repo deets?

nik-john commented 4 years ago

Is anyone else currently working to create the spike? I can spin it up in a few hours if no one else is - will fork the repo and drop a note here when done

nik-john commented 4 years ago

@QuincyLarson Would this be the API structure we will be looking at more or less?

  GET api/v1/users
  GET api/v1/users/:userId
  POST api/v1/users
  PUT api/v1/users/:userId
  PATCH api/v1/users/:userId
  DELETE api/v1/users/:userId

  GET api/v1/locations
  GET api/v1/locations/:locationId
  POST api/v1/locations
  PUT api/v1/locations/:locationId
  PATCH api/v1/locations/:locationId
  DELETE api/v1/locations/:locationId

  GET api/v1/groups
  GET api/v1/groups/:groupId
  POST api/v1/groups
  PUT api/v1/groups/:groupId
  PATCH api/v1/groups/:groupId
  DELETE api/v1/groups/:groupId

~~GET api/v1/user_bans~~ ~~GET api/v1/user_bans/:user_banId~~ ~~POST api/v1/user_bans~~ ~~PUT api/v1/user_bans/:user_banId~~ ~~PATCH api/v1/user_bans/:user_banId~~ ~~DELETE api/v1/user_bans/:user_banId~~

~~GET api/v1/user_groups~~ ~~GET api/v1/user_groups/:user_groupId~~ ~~POST api/v1/user_groups~~ ~~PUT api/v1/user_groups/:user_groupId~~ ~~PATCH api/v1/user_groups/:user_groupId~~ ~~DELETE api/v1/user_groups/:user_groupId~~


  GET api/v1/venues
  GET api/v1/venues/:venueId
  POST api/v1/venues
  PUT api/v1/venues/:venueId
  PATCH api/v1/venues/:venueIdv
  DELETE api/v1/venues/:venueId

  GET api/v1/events
  GET api/v1/events/:eventId
  POST api/v1/events
  PUT api/v1/events/:eventId
  PATCH api/v1/events/:eventId
  DELETE api/v1/events/:eventId

  GET api/v1/sponsors
  GET api/v1/sponsors/:sponsorId
  POST api/v1/sponsors
  PUT api/v1/sponsors/:sponsorId
  PATCH api/v1/sponsors/:sponsorId
  DELETE api/v1/sponsors/:sponsorId

~~GET api/v1/rsvps~~ ~~GET api/v1/rsvps/:rsvpId~~ ~~POST api/v1/rsvps~~ ~~PUT api/v1/rsvps/:rsvpId~~ ~~PATCH api/v1/rsvps/:rsvpId~~ ~~DELETE api/v1/rsvps/:rsvpId~~

  GET api/v1/event_sponsors
  GET api/v1/event_sponsors/:event_sponsorId
  POST api/v1/event_sponsors
  PUT api/v1/event_sponsors/:event_sponsorId
  PATCH api/v1/event_sponsors/:event_sponsorId
  DELETE api/v1/event_sponsors/:event_sponsorId

typeofweb commented 4 years ago

Looks good to me. Just one question: In which scenario would we use user_groups endpoint?

About Next.js in general: I've been using it for over a year now with TypeScript and Redux and it seems like the best choice for this kind of application.

Zeko369 commented 4 years ago

Why did you just create CRUD rest endpoints for everyying? user_groups and event_sponsors are many to many relations (so just dummy tables), we don't need to manually create those

Zeko369 commented 4 years ago

Also IMO we should use something similar to how rails handles nested routes and not to have a lot of top level routes. For example nest RSVPS into events api/v1/events/:eventID/rsvps

nik-john commented 4 years ago

@Zeko369 I just took the existing tables and created CRUD end points for everything so that we would have a first draft to start working off of. I am hoping to make this a working document so we can keep editing this.

We can rip out/add as many end points as we want, as per group consensus. please do provide a consolidated list of edits you want and I'll make the changes.

@mmiszy (I'm somehow not able to tag you) -

just one question: In which scenario would we use user_groups endpoint?

We wouldn't. I'll remove it

PS: I'm open to suggestions regarding any other approaches you guys might have to come to a consensus about the API structure

kognise commented 4 years ago

Routes look awesome! Although we might want to switch around the auth-related ones, see #40

bernhard-hofmann commented 4 years ago

I'll add my thoughts for what they're worth.

The end points should be designed to fit the needs of the application. The underlying tables shouldn't be the basis of the API.

nik-john commented 4 years ago

@bernhard-hofmann Agreed. Like I mentioned

I just took the existing tables and created CRUD end points for everything so that we would have a first draft to start working off of. I am hoping to make this a working document so we can keep editing this.

We can rip out/add as many end points as we want, as per group consensus. please do provide a consolidated list of edits you want and I'll make the changes.

Could you provide your thoughts on what the routes should be?

bernhard-hofmann commented 4 years ago

The problem with starting with this long list is that we have to remove what's not needed. It's easy to miss something and leave endpoints we don't need. (YAGNI)

Let's review what the app needs and create (or keep) only the endpoints needed to satisfy each requirement.

typeofweb commented 4 years ago

There are a few scenarios written. We could start from them, analyze the use cases and then design the API routes.

nik-john commented 4 years ago

Here's a first stab at the APIs as per the use cases in README.md

As a future participant

I can use a search box on the landing page to input a city, state, or country name and it will autocomplete. I can click one of those locations.

GET api/v1/locations?city=sfo&country=usa

When I click one of those locations, I can see the "show view" for that event's group, with details about the upcoming event, along with a button to RSVP.

GET api/v1/locations/:locationId

I can click the "RSVP" button. When I do, I will be prompted to sign in. Then I will receive an email with a ticket and add me to the public list of event attendees.

POST api/v1/groups/:groupId/events/:eventId/rsvp
{
    "userId": "foobar",
    "guests": 3
}

I will receive a second email the day before the event to remind me. This will need to be a job I guess
After the event, I will automatically get emails notifying me of subsequent events. This will need to be a job I guess

As an organizer

I can create a group.

POST api/v1/groups
{
    "name": "foobar",
    "description": "lorem ipsum",
        "locationId": "baz",
        "creatorId": "foofoo"
}

I can edit details about the group, including a Slack/Discord/Facebook/WeChat/WhatsApp link participants can join to discuss and coordinate events.

{
    "name": "new name",
}

I can create events, and set their location and capacity.

@QuincyLarson Looks like the Event table will need 'capacity' to be added

{
    "name": "foobar",
    "groupId": "bar",
        "venueId": "zzz",
        "canceled": false
}

PATCH api/v1/groups/:groupId/events/:eventId
{
    "venueId": "newVenueId",
}

PATCH api/v1/venues/:venueId
{
    "capacity": 5000
}

I can cancel events.

DELETE api/v1/groups/:groupId/events/:eventId

I can email the entire list of participants.

{
    "subject": "Foo bar",
    "body": "Foo bar baz"    
}

I can ban a participant whom I believe is toxic or who has previously broken my organization's code of conduct.

PATCH api/v1/users/:userId/ban

I can add a venue sponsor to the event with a link to their website as a way of thanking them for hosting."

{
    "name": "foobar",
        "website": "www.website.com",
        "type": "VENUE
}

I can add a food sponsor to the event with a link to their website as a way of thanking them for food.

{
    "name": "foobar",
        "website": "www.website.com",
        "type": "FOOD"
}

PS: I'm in the process of creating an open API spec so we can have official docs

Zeko369 commented 4 years ago

"I can email the entire list of participants." POST api/v1/events/:eventId/email

Also I would namespace all event routes with group api/v1/group/:groupId/event...

nik-john commented 4 years ago

@Zeko369 Agreed with both

nik-john commented 4 years ago

I have created a PR with the open API specification for the mentioned end points here: https://github.com/freeCodeCamp/chapter/pull/46/files Please feel free to add to the PR/comment and critique (Additions are preferred to comments as most of us are working on this on top of regular full time jobs 😉 )

cc: @QuincyLarson @Zeko369 @mmiszy

jp-sauve commented 4 years ago

If MVP is for a single server, hosted by a group, not all of those endpoints (user stories?) seem necessary. If I'm hosting for my local FCC chapter, who is going to come to my group's site and search for a city when my group is geographic by nature? Emails will have to be carefully considered too, as self-hosting email that doesn't get immediately marked as spam takes more than a server being willing to send out. I'm all for user stories, but I don't know why they would be linked directly to api endpoints either.

valishah commented 4 years ago

@nik-john , I agree with @Zeko369 comment of using nested paths. We could use something like

GET/PUT/PATCH/DELETE  api/v1/event/:eventId/sponsors
GET/PUT/PATCH/DELETE api/v1/event/:eventId/sponsors/:sponsorId

allella commented 4 years ago

@kognise also has a proposed "terminology" update to the readme to call a "chapter" effectively what a "group" is in the schema. Group is pretty vague and it would be nice to have some parity between the core item in the schema and what we're referring to in the business logic terminology.

So, can we change "group(s)" to "chapter(s)"?

nik-john commented 4 years ago

@allella For sure. I'll update the swagger doc

nik-john commented 4 years ago

@valishah Agreed - I'll update the PR with the changes. Please keep an eye on https://github.com/freeCodeCamp/chapter/pull/46

jimthedev commented 4 years ago

Not sure how any of what you are doing relates to Next.js. We are playing with a Next.js based ui here. If there's a place you'd rather have this let me know. We're not really focusing on the styling. Keeping it raw and just hoping to get the right things on a page for now.

Dhara159 commented 4 years ago

As API endpoints are ready and we are almost clear about the database schema, should we start the backend development? If that is the case, I would like to contribute from the backend side also! If there is anyone up for team up, please ping me or CC me and let's start working on it!

QuincyLarson commented 4 years ago

If MVP is for a single server, hosted by a group, not all of those endpoints (user stories?) seem necessary. If I'm hosting for my local FCC chapter, who is going to come to my group's site and search for a city when my group is geographic by nature? Emails will have to be carefully considered too, as self-hosting email that doesn't get immediately marked as spam takes more than a server being willing to send out. I'm all for user stories, but I don't know why they would be linked directly to api endpoints either.

Just to be clear, freeCodeCamp will host a single Chapter instance that all of the official freeCodeCamp chapters can be on. This way, a whole lot more people will discover your chapter. This is why we will want search functionality.

I just published this last night that goes a bit more into detail on this: https://github.com/freeCodeCamp/chapter/issues/47#issuecomment-543006930

QuincyLarson commented 4 years ago

We have all decided to use Next.js, and this issue hasn't been updated for a while, so I am closing this issue.

nik-john commented 4 years ago

@all-contributors please add @quincylarson for code doc ideas

allcontributors[bot] commented 4 years ago

@nik-john

I've put up a pull request to add @quincylarson! :tada:

freeCodeCamp / chapter

Spiking on the API using Next.js #17