Giter Club home page Giter Club logo

crudizer-core-client's Introduction

crudizer-core

crudizer-core is a fullstack CRUD web app kickstarter which one is includes common essentials:

  • E2E data listing (w/ pagination) (Mongo database => Node.js backend => Nuxt 3 & Axios API requests => UI)
  • Ready to use E2E base64 image dataflow
  • Create/Update/Delete transactions for items
  • Item detail page & related logics
  • Ready to use UI for essentials (w/ responsive styling and config based color usage)



Data Structure & App Scope

Structure builded upon an example data with common fields of many applications datas:

{
    id: String,
    name: String,
    imgSource: String, // base64
    price: {
      amount: Number,
      currency: String,
    },
    info: String,
}

but that doesn't mean you must build your app with this data, you can customize the data & related UI parts as you wish.

You can also add new components/pages new api endpoint connections (of course after adding it to backend)




API Environment Declaration

You need to update your api base url from environment.js to make your app working with your backend. Take care of this especially when you deploying the app.

NOTE: Default is adjusted to localhost:3001 because default port is 3001 on backend of crudizer-core.




This is frontend repo of crudizer-core, you can reach to backend from here: crudizer-core-server



Nuxt 3 Minimal Starter

Look at the Nuxt 3 documentation to learn more.

Setup

Make sure to install the dependencies:

# npm
npm install

# pnpm
pnpm install

# yarn
yarn install

# bun
bun install

Development Server

Start the development server on http://localhost:3000:

# npm
npm run dev

# pnpm
pnpm run dev

# yarn
yarn dev

# bun
bun run dev

Production

Build the application for production:

# npm
npm run build

# pnpm
pnpm run build

# yarn
yarn build

# bun
bun run build

Locally preview production build:

# npm
npm run preview

# pnpm
pnpm run preview

# yarn
yarn preview

# bun
bun run preview

Check out the deployment documentation for more information.

crudizer-core-client's People

Contributors

serhatpolat avatar

Stargazers

Ümit Can HAN avatar  avatar Buse Özçelik avatar Bedirhan avatar

Watchers

 avatar

crudizer-core-client's Issues

Improve empty item list handling

Is your feature request related to a problem? Please describe.
App already checking the existence of items list but there is no any specific Ul yet (like "Sorry there is no items to show")

Describe the solution you'd like
Develop a specific Ul for that scenario, so UX will be better.

Additional context
Maybe that UI should include some animations which one is directs the user to add a new item (Optional)

Add single item fetching feature & Create item detail page

Is your feature request related to a problem? Please describe.
App just fetching the items together, there is no any option to fetch single item.

Describe the solution you'd like
There should be a structure to fetch just one item when we don't need more. Best way to handle this is creating a item detail page.

Additional context

  • Switch to pages structure instead of using app.vue for main page
  • Add routing handling to main app file (w/ NuxtPage)

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.