diff --git a/README.md b/README.md index 5c4780a..773e611 100644 --- a/README.md +++ b/README.md @@ -1,18 +1,13 @@ -# Welcome to React Router! +# Ligonier Code Challenge - Ben Nilsen -A modern, production-ready template for building full-stack React applications using React Router. - -[](https://stackblitz.com/github/remix-run/react-router-templates/tree/main/default) +This is a React Router application that loads data from the [Picsum API](), displaying the images in a list and allowing the user to click on an image to reveal the photographer who snapped it! ## Features -- 🚀 Server-side rendering -- ⚡️ Hot Module Replacement (HMR) -- 📦 Asset bundling and optimization -- 🔄 Data loading and mutations -- 🔒 TypeScript by default -- 🎉 TailwindCSS for styling -- 📖 [React Router docs](https://reactrouter.com/) +- Async data fetching from [Picsum API]() +- React Frontend that is both reactive and responsive from phones to desktops +- List mode to show all the photos in a contiguous list +- Gallery mode to see more images at once in a nice grid ## Getting Started @@ -24,7 +19,7 @@ Install the dependencies: npm install ``` -### Development +### Running Start the development server with HMR: @@ -34,54 +29,4 @@ npm run dev Your application will be available at `http://localhost:5173`. -## Building for Production - -Create a production build: - -```bash -npm run build -``` - -## Deployment - -### Docker Deployment - -To build and run using Docker: - -```bash -docker build -t my-app . - -# Run the container -docker run -p 3000:3000 my-app -``` - -The containerized application can be deployed to any platform that supports Docker, including: - -- AWS ECS -- Google Cloud Run -- Azure Container Apps -- Digital Ocean App Platform -- Fly.io -- Railway - -### DIY Deployment - -If you're familiar with deploying Node applications, the built-in app server is production-ready. - -Make sure to deploy the output of `npm run build` - -``` -├── package.json -├── package-lock.json (or pnpm-lock.yaml, or bun.lockb) -├── build/ -│ ├── client/ # Static assets -│ └── server/ # Server-side code -``` - -## Styling - -This template comes with [Tailwind CSS](https://tailwindcss.com/) already configured for a simple default starting experience. You can use whatever CSS framework you prefer. - ---- - Built with ❤️ using React Router. diff --git a/app/ligonier/photo_card.tsx b/app/ligonier/photo_card.tsx index 5e60199..3b3d35e 100644 --- a/app/ligonier/photo_card.tsx +++ b/app/ligonier/photo_card.tsx @@ -8,9 +8,6 @@ export function PhotoCard({ data }) { setInfoToggled(!infoToggled); } - if (data["id"] == 1) { - console.log(data); - } return (