Developer Details CRUD Application

In memory CRUD application built using React.js, Next.js, Apollo and GraphQL.

View the working app here hosted on Vercel Developer Details CRUD App

The pipeline/ build is managed through GitHub workflows/actions .github/workflows/deploy.yml View Action

Tech tasks

• Add unit tests for front-end components
• Add cypress end-to-end tests
• Add pipeline to deploy to staging and production using .github/workflows
• Run unit tests and end-to-end tests when pushing to master or creating pull_requests pointing to master .github/workflows
• Add tests for next.js/pages
• Add tests for graphql API
• Make components/ pages accessible
• Connect to database rather than in memory data
• Add next lint - check build for details

Built With

• Next.js
• React.js
• Apollo Client
• Apollo Server
• apollo-server-micro

Deployed to Vercel

• Vercel.com

---

GraphQL Queries

GraphQL Studio

query GetDevelopers {
  developers {
    id
    name
    skills
  }
}

mutation AddDeveloper($id: String, $name: String, $skills: String) {
  addDeveloper(id: $id, name: $name, skills: $skills) {
    id
    name
    skills
  }
}

// variables
{ "id": 'fd66e955-10e9-4762-8847-14fbdc80e38a', "name": "James Brown", "skills": "Jazz"}

mutation EditDeveloper($id: String, $name: String, $skills: String) {
  editDeveloper(id: $id, name: $name, skills: $skills) {
    id
    name
    skills
  }
}

// variables
{ "id": 'fd66e955-10e9-4762-8847-14fbdc80e38a', "name": "James Brown", "skills": "Jazz"}

mutation DeleteDeveloper($id: String) {
  deleteDeveloper(id: $id) {
    id
    name
    skills
  }
}

// variables
{ "id": "fd66e955-10e9-4762-8847-14fbdc80e38a"}